Dynamically get your dependencies from a cdn rather than bundling them in your app
$ npm install --save-dev dynamic-cdn-webpack-plugin module-to-cdn
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
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>
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"
}
webpack.config.js
const DynamicCdnWebpackPlugin = require('dynamic-cdn-webpack-plugin');
module.exports = {
mode: 'production',
plugins: [
new DynamicCdnWebpackPlugin(options)
]
}
Type: boolean
Default: false
Useful when working offline, will fallback to webpack normal behaviour
Type: string
Default: mode
Values: development
, production
Determine if it should load the development or the production version of modules
Type: Array<string>
Default: null
List the only modules that should be served by the cdn
Type: Array<string>
Default: []
List the modules that will always be bundled (not be served by the cdn)
Type: boolean
Default: false
Log whether the library is being served by the cdn or is bundled
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
.
Thanks goes to these wonderful people (emoji key):
Thomas Sileghem π» π |
βFaizaan π¬ π» π |
MICHAEL JACKSON π‘ |
fedeoo π» |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT Β© Thomas Sileghem