{"id":20716,"library":"webpack-cdn-plugin","title":"Webpack CDN Plugin","description":"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.","status":"maintenance","version":"3.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/shirotech/webpack-cdn-plugin","tags":["javascript","webpack","html","externals","script","include","assets","plugin","cdn"],"install":[{"cmd":"npm install webpack-cdn-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-cdn-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-cdn-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required to generate HTML and inject CDN script tags; the plugin hooks into html-webpack-plugin's lifecycle.","package":"html-webpack-plugin","optional":false}],"imports":[{"note":"Package is CommonJS-only; ESM import will fail. Use require().","wrong":"import WebpackCdnPlugin from 'webpack-cdn-plugin';","symbol":"WebpackCdnPlugin","correct":"const WebpackCdnPlugin = require('webpack-cdn-plugin');"},{"note":"Option key is 'modules' (array), not 'module' (singular).","wrong":"new WebpackCdnPlugin({ module: [...] })","symbol":"new WebpackCdnPlugin({...})","correct":"new WebpackCdnPlugin({ modules: [...] })"},{"note":"html-webpack-plugin exports directly, no .default needed.","wrong":"const HtmlWebpackPlugin = require('html-webpack-plugin').default;","symbol":"HtmlWebpackPlugin","correct":"const HtmlWebpackPlugin = require('html-webpack-plugin');"}],"quickstart":{"code":"const HtmlWebpackPlugin = require('html-webpack-plugin');\nconst WebpackCdnPlugin = require('webpack-cdn-plugin');\n\nmodule.exports = {\n  entry: './src/index.js',\n  output: { filename: 'bundle.js' },\n  plugins: [\n    new HtmlWebpackPlugin({ template: './src/index.html' }),\n    new WebpackCdnPlugin({\n      modules: [\n        { name: 'vue', var: 'Vue', path: 'dist/vue.runtime.min.js' },\n        { name: 'vue-router', var: 'VueRouter', path: 'dist/vue-router.min.js' }\n      ],\n      publicPath: '/node_modules',  // used when prod=false\n      prod: process.env.NODE_ENV === 'production'\n    })\n  ]\n};","lang":"javascript","description":"Configures Webpack CDN Plugin with Vue and vue-router for development serving via node_modules, production via unpkg CDN."},"warnings":[{"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).","message":"Plugin only supports Webpack 4; will not work with Webpack 5.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Migrate to modern CDN injection solutions like `html-webpack-plugin` with custom `ejs` templates or `webpack-subresource-integrity` plus external configuration.","message":"Package is unmaintained since 2019; no security updates or Webpack 5 support.","severity":"deprecated","affected_versions":"*"},{"fix":"Ensure all CDN modules are listed in package.json and installed locally. For non-npm packages, use the 'url' option instead of 'name'.","message":"The 'modules' option uses package name 'name' to fetch version from node_modules; if not installed, it will fail or use wrong version.","severity":"gotcha","affected_versions":"*"},{"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.","message":"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.","severity":"gotcha","affected_versions":"*"},{"fix":"Set cdnModule to a key defined in the modules object configuration for the WebpackCdnPlugin.","message":"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.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install webpack-cdn-plugin --save-dev` or `yarn add webpack-cdn-plugin --dev`.","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'webpack-cdn-plugin'"},{"fix":"Use `const WebpackCdnPlugin = require('webpack-cdn-plugin');` instead of `import`.","cause":"Using ES6 import incorrectly; package is CommonJS.","error":"TypeError: WebpackCdnPlugin is not a constructor"},{"fix":"Change `module: [...]` to `modules: [...]` in WebpackCdnPlugin constructor options.","cause":"Possibly passing 'module' instead of 'modules' in options.","error":"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."},{"fix":"Ensure html-webpack-plugin is installed (`npm install html-webpack-plugin --save-dev`) and add it to plugins array before WebpackCdnPlugin.","cause":"Plugin requires html-webpack-plugin to be installed and added before WebpackCdnPlugin.","error":"Cannot read property 'getHooks' of undefined"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}