Registry / devops / webpack-cdn-plugin

webpack-cdn-plugin

JSON →
library3.3.1jsnpmunverified

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.

devops
npm install webpack-cdn-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · WEBPACK-CDN-PLUGIN
W
webpack-cdn-plugin
devopsjavascriptv3.3.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

WebpackCdnPlugin
✓ const WebpackCdnPlugin = require('webpack-cdn-plugin');
✗ import WebpackCdnPlugin from 'webpack-cdn-plugin';
Package is CommonJS-only; ESM import will fail. Use require().
new WebpackCdnPlugin({...})
✓ new WebpackCdnPlugin({ modules: [...] })
✗ new WebpackCdnPlugin({ module: [...] })
Option key is 'modules' (array), not 'module' (singular).
HtmlWebpackPlugin
✓ const HtmlWebpackPlugin = require('html-webpack-plugin');
✗ const HtmlWebpackPlugin = require('html-webpack-plugin').default;
html-webpack-plugin exports directly, no .default needed.

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' }) ] };
Debug
Known issues
breakingPlugin 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).
affects: >=3.0.0
deprecatedPackage 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.
affects: *
gotchaThe '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'.
affects: *
gotchaWhen '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.
affects: *
gotchaIf 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.
affects: >=3.0.0
Errors
Common errors & fixes
Error: Cannot find module 'webpack-cdn-plugin'
Package not installed or not in node_modules.
fix
Run `npm install webpack-cdn-plugin --save-dev` or `yarn add webpack-cdn-plugin --dev`.
TypeError: WebpackCdnPlugin is not a constructor
Using ES6 import incorrectly; package is CommonJS.
fix
Use `const WebpackCdnPlugin = require('webpack-cdn-plugin');` instead of `import`.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
Possibly passing 'module' instead of 'modules' in options.
fix
Change `module: [...]` to `modules: [...]` in WebpackCdnPlugin constructor options.
Cannot read property 'getHooks' of undefined
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.
Upgrade
Version history
3.3.1latest on npm
Audit
Dependencies
html-webpack-pluginrequiredRequired to generate HTML and inject CDN script tags; the plugin hooks into html-webpack-plugin's lifecycle.
Agent activity
15 hits · last 30 days
node
12
Resources
githubhttps://github.com/shirotech/webpack-cdn-plugin ↗
packagehttps://www.npmjs.com/package/webpack-cdn-plugin ↗
webpack-cdn-plugin — npm install webpack-cdn-plugin · libregistry