dynamic-cdn-webpack-plugin
Dynamically get your dependencies from a cdn rather than bundling them in your app
Warning: This module is a fork from https://github.com/mastilver/dynamic-cdn-webpack-plugin to support Webpack 5.
Install
$ npm install --save-dev dynamic-cdn-webpack-plugin module-to-cdn
Compatibility with webpack
If you are using webpack --version <= 3 then you should be installing with the following command.
$ npm install --save-dev [email protected] module-to-cdn
Usage with HtmlWebpackPlugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
entry: {
'app.js': './src/app.js'
},
output: {
path.resolve(__dirname, './build'),
},
plugins: [
new HtmlWebpackPlugin(),
new DynamicCdnWebpackPlugin()
]
}
app.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
// ... do react stuff
webpack --mode=production will generate:
/* simplified webpack build */
[function(module, __webpack_exports__, __webpack_require__) {
module.exports = React;
}),
(function(module, __webpack_exports__, __webpack_require__) {
module.exports = ReactRouterDOM;
}),
(function(module, __webpack_exports__, __webpack_require__) {
var react = __webpack_require__(0);
var reactRouterDOM = __webpack_require__(1);
/* ... */
})]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.min.js"></script><script type="text/javascript" src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js"></script><script src="build/app.js"></script></body>
</html>
Usage with ManifestPlugin
webpack.config.js
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
entry: {
'app': './src/app.js'
},
output: {
path.resolve(__dirname, './build'),
},
plugins: [
new ManifestPlugin({
fileName: 'manifest.json'
}),
new DynamicCdnWebpackPlugin()
]
}
app.js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
// ... do react stuff
webpack --mode=production will generate:
/* simplified webpack build */
[function(module, __webpack_exports__, __webpack_require__) {
module.exports = React;
}),
(function(module, __webpack_exports__, __webpack_require__) {
module.exports = ReactRouterDOM;
}),
(function(module, __webpack_exports__, __webpack_require__) {
var react = __webpack_require__(0);
var reactRouterDOM = __webpack_require__(1);
/* ... */
})]
{
"app.js": "app.js",
"react.js": "https://unpkg.com/[email protected]/dist/react.min.js",
"react-router-dom.js": "https://unpkg.com/[email protected]/umd/react-router-dom.min.js"
}
API
DynamicCdnWebpackPlugin(options)
webpack.config.js
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
mode: 'production',
plugins: [
new DynamicCdnWebpackPlugin(options)
]
}
options.disable
Type: boolean
Default: false
Useful when working offline, will fallback to webpack normal behaviour
options.env
Type: string
Default: mode
Values: development, production
Determine if it should load the development or the production version of modules
options.only
Type: Array<string>
Default: null
List the only modules that should be served by the cdn
options.exclude
Type: Array<string>
Default: []
List the modules that will always be bundled (not be served by the cdn)
options.verbose
Type: boolean
Default: false
Log whether the library is being served by the cdn or is bundled
options.resolver
Type: string, function
Default: 'module-to-cdn'
Allow you to define a custom module resolver, it can either be a function or an npm module.
The resolver should return (or resolve as a Promise) either null or an object with the keys: name, var, url, version.
Related
Contributors
Thanks goes to these wonderful people (emoji key):
 Thomas Sileghem 💻 📖 ⚠️ |
 Faizaan 💬 💻 📖 |
 MICHAEL JACKSON 💡 |
 fedeoo 💻 |
 Kevin Malakoff 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © Thomas Sileghem