Webpack CDN Plugin

3.3.1 verified Sat Apr 25 auth: no javascript maintenance

A Webpack 4 plugin that externalizes node_modules in development and replaces them with CDN scripts in production, reducing build times and improving page load performance. Version 3.3.1 is the latest stable release, with no active development since 2019. It integrates with html-webpack-plugin (peer dep >=3) to inject script/link tags for external libraries like Vue or React. Key differentiators: automatic CDN URL generation via unpkg or custom paths, supports multiple pages via cdnModule option, and works with custom HTML templates. Only supports Webpack 4; for Webpack <4 use v1.x. Requires Node >=6.9.

Common errors

error Error: Cannot find module 'webpack-cdn-plugin' ↓

cause Package not installed or not in node_modules.

fix

Run npm install webpack-cdn-plugin --save-dev or yarn add webpack-cdn-plugin --dev.

error TypeError: WebpackCdnPlugin is not a constructor ↓

cause Using ES6 import incorrectly; package is CommonJS.

fix

Use const WebpackCdnPlugin = require('webpack-cdn-plugin'); instead of import.

error Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. ↓

cause Possibly passing 'module' instead of 'modules' in options.

fix

Change module: [...] to modules: [...] in WebpackCdnPlugin constructor options.

error Cannot read property 'getHooks' of undefined ↓

cause Plugin requires html-webpack-plugin to be installed and added before WebpackCdnPlugin.

fix

Ensure html-webpack-plugin is installed (npm install html-webpack-plugin --save-dev) and add it to plugins array before WebpackCdnPlugin.

Warnings

breaking Plugin only supports Webpack 4; will not work with Webpack 5. ↓

fix Use an alternative like `webpack-cdn-plugin` v2.x? Actually v3 only works with Webpack 4. Consider migrating to Webpack 5 compatible plugins (e.g., dynamic CDN via html-webpack-plugin).

deprecated Package is unmaintained since 2019; no security updates or Webpack 5 support. ↓

fix Migrate to modern CDN injection solutions like `html-webpack-plugin` with custom `ejs` templates or `webpack-subresource-integrity` plus external configuration.

gotcha The 'modules' option uses package name 'name' to fetch version from node_modules; if not installed, it will fail or use wrong version. ↓

fix Ensure all CDN modules are listed in package.json and installed locally. For non-npm packages, use the 'url' option instead of 'name'.

gotcha When 'prod' is false (development), the plugin uses 'publicPath' as base for local files; you must serve node_modules as static assets or run a dev server with proper static path. ↓

fix Configure your dev server (e.g., webpack-dev-server) to serve the node_modules folder at the same publicPath, or set prod to true with a CDN URL.

gotcha If you use 'cdnModule' option in HtmlWebpackPlugin to select per-page modules, ensure it matches module keys; otherwise plugin may not inject scripts for that page. ↓

fix Set cdnModule to a key defined in the modules object configuration for the WebpackCdnPlugin.

Install

npm install webpack-cdn-plugin

yarn add webpack-cdn-plugin

pnpm add webpack-cdn-plugin

Imports

WebpackCdnPlugin

wrong

import WebpackCdnPlugin from 'webpack-cdn-plugin';

correct

const WebpackCdnPlugin = require('webpack-cdn-plugin');

Package is CommonJS-only; ESM import will fail. Use require().

new WebpackCdnPlugin({...})
wrong
```
new WebpackCdnPlugin({ module: [...] })
```
correct
```
new WebpackCdnPlugin({ modules: [...] })
```
Option key is 'modules' (array), not 'module' (singular).

HtmlWebpackPlugin

wrong

const HtmlWebpackPlugin = require('html-webpack-plugin').default;

correct

const HtmlWebpackPlugin = require('html-webpack-plugin');

html-webpack-plugin exports directly, no .default needed.

Quickstart

Configures Webpack CDN Plugin with Vue and vue-router for development serving via node_modules, production via unpkg CDN.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackCdnPlugin = require('webpack-cdn-plugin');

module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  plugins: [
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    new WebpackCdnPlugin({
      modules: [
        { name: 'vue', var: 'Vue', path: 'dist/vue.runtime.min.js' },
        { name: 'vue-router', var: 'VueRouter', path: 'dist/vue-router.min.js' }
      ],
      publicPath: '/node_modules',  // used when prod=false
      prod: process.env.NODE_ENV === 'production'
    })
  ]
};