Gathering detailed insights and metrics for webpack-cdn-plugin
Gathering detailed insights and metrics for webpack-cdn-plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Installations
npm install webpack-cdn-pluginDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=6.9
Node Version
12.16.1
NPM Version
6.13.4
Score
65.3
Supply Chain
90.2
Quality
71.4
Maintenance
50
Vulnerability
97.6
License
Releases
Unable to fetch releases
Languages
1
JavaScript
JavaScript (100%)
Developer
shirotech
Download Statistics
Total Downloads
1,314,096
Last Day
280
Last Week
1,404
Last Month
5,805
Last Year
73,019
GitHub Statistics
MIT License
345 Stars
180 Commits
42 Forks
8 Watchers
16 Branches
14 Contributors
Updated on Mar 21, 2025
Bundle Size
729.05 kB
Minified
193.05 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
3.3.1
Package Id
webpack-cdn-plugin@3.3.1
Size
7.00 kB
NPM Version
6.13.4
Node Version
12.16.1
Published on
Apr 05, 2020
Total Downloads
Cumulative downloads
Total Downloads
1,314,096
Dependencies
1
Peer Dependencies
1
Note: This only works on Webpack 4, if you're still on Webpack 3 or below please use version 1.x
CDN extension for the HTML Webpack Plugin
Enhances html-webpack-plugin functionality by allowing you to specify the modules you want to externalize from node_modules in development and a CDN in production.
Basically this will allow you to greatly reduce build time when developing and improve page load performance on production.
Installation
It is recommended to run webpack on node 5.x or higher
Install the plugin with npm:
1npm install webpack-cdn-plugin --save-dev
or yarn
1yarn add webpack-cdn-plugin --dev
Basic Usage
Require the plugin in your webpack config:
1const HtmlWebpackPlugin = require('html-webpack-plugin'); 2const WebpackCdnPlugin = require('webpack-cdn-plugin');
Add the plugin to your webpack config:
1module.exports = { 2 // ... 3 plugins: [ 4 new HtmlWebpackPlugin(), 5 new WebpackCdnPlugin({ 6 modules: [ 7 { 8 name: 'vue', 9 var: 'Vue', 10 path: 'dist/vue.runtime.min.js' 11 }, 12 { 13 name: 'vue-router', 14 var: 'VueRouter', 15 path: 'dist/vue-router.min.js' 16 }, 17 { 18 name: 'vuex', 19 var: 'Vuex', 20 path: 'dist/vuex.min.js' 21 } 22 ], 23 publicPath: '/node_modules' 24 }) 25 ] 26 // ... 27};
This will generate an index.html file with something like below:
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Webpack App</title> 6 <link href="//unpkg.com/vue@2.3.3/dist/vue.css" rel="stylesheet"> 7 </head> 8 <body> 9 <script type="text/javascript" src="https://unpkg.com/vue@2.5.17/dist/vue.runtime.min.js"></script> 10 <script type="text/javascript" src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script> 11 <script type="text/javascript" src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script> 12 <script type="text/javascript" src="/assets/app.js"></script> 13 </body> 14</html>
And u also need config in
1# src/router 2import Vue from 'vue' 3import VueRouter from 'vue-router' 4 5if (!window.VueRouter) Vue.use(VueRouter) 6// ... 7// Any lib need Vue.use() just to do so
When you set prod to false, it will output urls using publicPath, so you might need to expose it as some sort of static route.
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Webpack App</title> 6 <link href="/node_modules/vue/dist/vue.css" rel="stylesheet"> 7 </head> 8 <body> 9 <script type="text/javascript" src="/node_modules/vue/dist/vue.runtime.min.js"></script> 10 <script type="text/javascript" src="/node_modules/vue-router/dist/vue-router.min.js"></script> 11 <script type="text/javascript" src="/node_modules/vuex/dist/vuex.min.js"></script> 12 <script type="text/javascript" src="/assets/app.js"></script> 13 </body> 14</html>
You can also use your own custom html template, please refer to html-webpack-plugin.
Please see the example folder for a basic working example.
Configuration
You can pass an object options to WebpackCdnPlugin. Allowed values are as follows:
modules:array or object(for multiple pages)
The available options for each module, which is part of an array. If you want inject cdn for multiple pages, you can config like this:
1plugins:[ 2// ...otherConfig 3new HtmlWebpackPlugin({ 4 title: 'title', 5 cdnModule: 'vue', 6 favicon: 'path/to/favicon', 7 template: 'path/to/template', 8 filename: 'filename', 9 // other config 10 }), 11 new HtmlWebpackPlugin({ 12 title: 'title', 13 cdnModule: 'react', 14 favicon: 'path/to/favicon', 15 template: 'path/to/template', 16 filename: 'filename', 17 // other config 18 }), 19 new WebpackCdnPlugin({ 20 modules: { 21 'vue': [ 22 { name: 'vue', var: 'Vue', path: 'dist/vue.min.js' }, 23 ], 24 'react': [ 25 { name: 'react', var: 'React', path: `umd/react.${process.env.NODE_ENV}.min.js` }, 26 { name: 'react-dom', var: 'ReactDOM', path: `umd/react-dom.${process.env.NODE_ENV}.min.js` }, 27 ] 28 } 29 }) 30]
The extra html-webpack-plugin option cdnModule corresponds to the configuration key that you config inside the webpack-cdn-plugin modules
- If you do not give
cdnModulethis value, the default is to take the first one - If you set
cdnModule = false, it will not inject cdn
More detail to see #13
name:string
The name of the module you want to externalize
cdn:string (optional)
If the name from the CDN resource is different from npm, you can override with this i.e. moment is moment.js on cdnjs
var:string (optional)
A variable that will be assigned to the module in global scope, webpack requires this. If not supplied than it will be the same as the name.
path:string (optional)
You can specify a path to the main file that will be used, this is useful when you want the minified version for example if main does not point to it.
paths:string[] (optional)
You can alternatively specify multiple paths which will be loaded from the CDN.
style:string (optional)
If the module comes with style sheets, you can also specify it as a path.
styles:string[] (optional)
You can alternatively specify multiple style sheets which will be loaded from the CDN.
cssOnly:boolean | false
If the module is just a css library, you can specify cssOnly to true, it will ignore path.
localScript:string (option)
Useful when you wanted to use your own build version of the library for js files
localStyle:string (option)
Useful when you wanted to use your own build version of the library for css files
prodUrl:string (option)
Overrides the global prodUrl, allowing you to specify the CDN location for a specific module
devUrl:string (option)
Overrides the global devUrl, allowing you to specify the location for a specific module
prod:boolean | true
prod flag defaults to true, which will output uri using the CDN, when false it will use the file from node_modules folder locally.
prodUrl:string | //unpkg.com/:name@:version/:path
You can specify a custom template url with the following replacement strings:
:name: The name of the module e.g. vue
:version: The version of the module e.g. 1.0.0
:path: The path to the file e.g. lib/app.min.js
A common example is you can use cdnjs e.g. //cdnjs.cloudflare.com/ajax/libs/:name/:version/:path. If not specified it will fallback to using unpkg.com.
devUrl:string | /:name/:path
Similar to prodUrl, this option overrides the default template url for when prod is false
publicPath:string (optional)
Prefixes the assets with this string, if none is provided it will fallback to the one set globally in webpack.options.output.publicPath, note that this is always empty when prod is true so that it makes use of the CDN location because it is a remote resource.
optimize:boolean | false
Set to true to ignore every module not actually required in your bundle.
crossOrigin:string (optional)
Allows you to specify a custom crossorigin attribute of either "anonymous" or "use-credentials", to configure the CORS requests for the element's fetched data. Visit MDN for more information.
sri:boolean | false
Adds a Subresource Integrity (SRI) hash in the integrity attribute when generating tags for static files. See MDN for more information.
pathToNodeModules?: string (optional)
Path to the node_modules folder to "serve" packages from. This is used to determinate what version to request for packages from the CDN.
If not provided, the value returned by process.cwd() is used.
Contribution
This is a pretty simple plugin and caters mostly for my needs. However, I have made it as flexible and customizable as possible.
If you happen to find any bugs, do please report it in the issues or can help improve the codebase, pull requests are always welcomed.
Resources
Contributors
Many thanks to the following contributors:
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 5/24 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 11 are checked with a SAST tool
Reason
50 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Score
2
/10
Last Scanned on 2025-05-05
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More