{"id":13493840,"url":"https://github.com/shirotech/webpack-cdn-plugin","last_synced_at":"2025-04-12T19:49:56.996Z","repository":{"id":42208792,"uuid":"90877626","full_name":"shirotech/webpack-cdn-plugin","owner":"shirotech","description":"A webpack plugin that use externals of CDN urls for production and local node_modules for development","archived":false,"fork":false,"pushed_at":"2023-01-06T01:49:40.000Z","size":1026,"stargazers_count":345,"open_issues_count":28,"forks_count":41,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-12T19:49:48.289Z","etag":null,"topics":["assets","cdn","cdnjs","html","node","nodejs","npm","unpkg","webpack","webpack-plugin","webpack2","webpack3","webpack4","yarn"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shirotech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-10T15:06:39.000Z","updated_at":"2025-03-21T13:42:27.000Z","dependencies_parsed_at":"2023-02-05T02:00:35.211Z","dependency_job_id":null,"html_url":"https://github.com/shirotech/webpack-cdn-plugin","commit_stats":null,"previous_names":["van-nguyen/webpack-cdn-plugin"],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirotech%2Fwebpack-cdn-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirotech%2Fwebpack-cdn-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirotech%2Fwebpack-cdn-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirotech%2Fwebpack-cdn-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shirotech","download_url":"https://codeload.github.com/shirotech/webpack-cdn-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625501,"owners_count":21135513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["assets","cdn","cdnjs","html","node","nodejs","npm","unpkg","webpack","webpack-plugin","webpack2","webpack3","webpack4","yarn"],"created_at":"2024-07-31T19:01:19.308Z","updated_at":"2025-04-12T19:49:56.976Z","avatar_url":"https://github.com/shirotech.png","language":"JavaScript","readme":"*Note:* This only works on Webpack 4, if you're still on Webpack 3 or below please use version 1.x\n\n## CDN extension for the HTML Webpack Plugin\n\n[![Build Status](https://travis-ci.org/shirotech/webpack-cdn-plugin.svg?branch=master)](https://travis-ci.org/shirotech/webpack-cdn-plugin)\n[![codecov](https://codecov.io/gh/shirotech/webpack-cdn-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/shirotech/webpack-cdn-plugin)\n\nEnhances [html-webpack-plugin](https://github.com/ampedandwired/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.\n\nBasically this will allow you to greatly reduce build time when developing and improve page load performance on production.\n\n### Installation\n\nIt is recommended to run webpack on **node 5.x or higher**\n\nInstall the plugin with npm:\n\n```bash\nnpm install webpack-cdn-plugin --save-dev\n```\n\nor yarn\n\n```bash\nyarn add webpack-cdn-plugin --dev\n```\n\n### Basic Usage\n\nRequire the plugin in your webpack config:\n\n```javascript\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst WebpackCdnPlugin = require('webpack-cdn-plugin');\n```\n\nAdd the plugin to your webpack config:\n\n```javascript\nmodule.exports = {\n  // ...\n  plugins: [\n    new HtmlWebpackPlugin(),\n    new WebpackCdnPlugin({\n      modules: [\n        {\n          name: 'vue',\n          var: 'Vue',\n          path: 'dist/vue.runtime.min.js'\n        },\n        {\n          name: 'vue-router',\n          var: 'VueRouter',\n          path: 'dist/vue-router.min.js'\n        },\n        {\n          name: 'vuex',\n          var: 'Vuex',\n          path: 'dist/vuex.min.js'\n        }\n      ],\n      publicPath: '/node_modules'\n    })\n  ]\n  // ...\n};\n```\n\nThis will generate an `index.html` file with something like below:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eWebpack App\u003c/title\u003e\n    \u003clink href=\"//unpkg.com/vue@2.3.3/dist/vue.css\" rel=\"stylesheet\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue@2.5.17/dist/vue.runtime.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vuex@3.0.1/dist/vuex.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"/assets/app.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nAnd u also need config in\n\n```javascript\n# src/router\nimport Vue from 'vue'\nimport VueRouter from 'vue-router'\n\nif (!window.VueRouter) Vue.use(VueRouter)\n// ...\n// Any lib need Vue.use() just to do so\n```\n\nWhen you set `prod` to `false`, it will output urls using `publicPath`, so you might need to expose it as some sort of static route.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003eWebpack App\u003c/title\u003e\n    \u003clink href=\"/node_modules/vue/dist/vue.css\" rel=\"stylesheet\"\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n  \u003cscript type=\"text/javascript\" src=\"/node_modules/vue/dist/vue.runtime.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"/node_modules/vue-router/dist/vue-router.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"/node_modules/vuex/dist/vuex.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/javascript\" src=\"/assets/app.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can also use your own custom html template, please refer to [html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin).\n\nPlease see the [example](example) folder for a basic working example.\n\n### Configuration\n\nYou can pass an object options to WebpackCdnPlugin. Allowed values are as follows:\n\n##### `modules`:`array` or `object`(for multiple pages)\n\nThe available options for each module, which is part of an array.\nIf you want inject cdn for multiple pages, you can config like this:\n\n```js\nplugins:[\n// ...otherConfig\nnew HtmlWebpackPlugin({\n      title: 'title',\n      cdnModule: 'vue',\n      favicon: 'path/to/favicon',\n      template: 'path/to/template',\n      filename: 'filename',\n      // other config\n }),\n new HtmlWebpackPlugin({\n      title: 'title',\n      cdnModule: 'react',\n      favicon: 'path/to/favicon',\n      template: 'path/to/template',\n      filename: 'filename',\n      // other config\n  }),\n new WebpackCdnPlugin({\n   modules: {\n      'vue': [\n        { name: 'vue', var: 'Vue', path: 'dist/vue.min.js' },\n      ],\n      'react': [\n        { name: 'react', var: 'React', path: `umd/react.${process.env.NODE_ENV}.min.js` },\n        { name: 'react-dom', var: 'ReactDOM', path: `umd/react-dom.${process.env.NODE_ENV}.min.js` },\n      ]\n    }\n })\n]\n```\n\nThe extra `html-webpack-plugin` option `cdnModule` corresponds to the configuration __key__ that you config inside the `webpack-cdn-plugin` modules\n- If you do not give `cdnModule` this value, the default is to take the first one\n- If you set `cdnModule = false`, it will not inject cdn\n\nMore detail to see [#13](https://github.com/shirotech/webpack-cdn-plugin/pull/13)\n\n`name`:`string`\n\nThe name of the module you want to externalize\n\n`cdn`:`string` (optional)\n\nIf the name from the CDN resource is different from npm, you can override with this i.e. `moment` is `moment.js` on cdnjs\n\n`var`:`string` (optional)\n\nA 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.\n\n`path`:`string` (optional)\n\nYou 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.\n\n`paths`:`string[]` (optional)\n\nYou can alternatively specify multiple paths which will be loaded from the CDN.\n\n`style`:`string` (optional)\n\nIf the module comes with style sheets, you can also specify it as a path.\n\n`styles`:`string[]` (optional)\n\nYou can alternatively specify multiple style sheets which will be loaded from the CDN.\n\n`cssOnly`:`boolean` | `false`\n\nIf the module is just a css library, you can specify `cssOnly` to `true`, it will ignore path.\n\n`localScript`:`string` (option)\n\nUseful when you wanted to use your own build version of the library for js files\n\n`localStyle`:`string` (option)\n\nUseful when you wanted to use your own build version of the library for css files\n\n`prodUrl`:`string` (option)\n\nOverrides the global prodUrl, allowing you to specify the CDN location for a specific module\n\n`devUrl`:`string` (option)\n\nOverrides the global devUrl, allowing you to specify the location for a specific module\n\n\n##### `prod`:`boolean` | `true`\n\n`prod` flag defaults to `true`, which will output uri using the CDN, when `false` it will use the file from `node_modules` folder locally.\n\n##### `prodUrl`:`string` | `//unpkg.com/:name@:version/:path`\n\nYou can specify a custom template url with the following replacement strings:\n\n`:name`: The name of the module e.g. `vue`\n\n`:version`: The version of the module e.g. `1.0.0`\n\n`:path`: The path to the file e.g. `lib/app.min.js`\n\nA 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.\n\n##### `devUrl`:`string` | `/:name/:path`\n\nSimilar to `prodUrl`, this option overrides the default template url for when `prod` is `false`\n\n##### `publicPath`:`string` (optional)\n\nPrefixes 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.\n\n##### `optimize`:`boolean` | `false`\n\nSet to `true` to ignore every module not actually required in your bundle.\n\n##### `crossOrigin`:`string` (optional)\n\nAllows 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](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) for more information.\n\n##### `sri`:`boolean` | `false`\n\nAdds a Subresource Integrity (SRI) hash in the integrity attribute when generating tags for static files. See [MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) for more information.\n\n##### `pathToNodeModules?: string` (optional)\n\nPath to the `node_modules` folder to \"serve\" packages from. This is used to determinate what version to request for packages from the CDN.\n\nIf not provided, the value returned by `process.cwd()` is used.\n\n### Contribution\n\nThis is a pretty simple plugin and caters mostly for my needs. However, I have made it as flexible and customizable as possible.\n\nIf you happen to find any bugs, do please report it in the [issues](/../../issues) or can help improve the codebase, [pull requests](/../../pulls) are always welcomed.\n\n### Resources\n\n- [Webpack vs Gulp](https://shirotech.com/tutorial/webpack-vs-gulp)\n- [Managing your Node.js versions](https://shirotech.com/node-js/managing-your-node-js-versions)\n\n### Contributors\n\nMany thanks to the following contributors:\n\n- [xiaoiver](https://github.com/xiaoiver)\n- [QingWei-Li](https://github.com/QingWei-Li)\n- [jikkai](https://github.com/jikkai)\n- [likun7981](https://github.com/likun7981)\n- [kagawagao](https://github.com/kagawagao)\n- [mahcloud](https://github.com/mahcloud)\n- [mistic100](https://github.com/mistic100)\n- [gaje](https://github.com/gaje)\n- [myst729](https://github.com/myst729)\n- [MrTreasure](https://github.com/MrTreasure)\n- [Neo-Zhixing](https://github.com/Neo-Zhixing)\n- [G-Rath](https://github.com/G-Rath)\n- [prsnca](https://github.com/prsnca)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshirotech%2Fwebpack-cdn-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshirotech%2Fwebpack-cdn-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshirotech%2Fwebpack-cdn-plugin/lists"}