@moyuyc/dynamic-cdn-webpack-plugin
v4.0.3
Published
Dynamically get your dependencies from a cdn rather than bundling them in your app
Downloads
11
Maintainers
moyuycReadme
dynamic-cdn-webpack-plugin
Dynamically get your dependencies from a cdn rather than bundling them in your app
Install
$ npm install --save-dev dynamic-cdn-webpack-plugin module-to-cdnCompatibility 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-cdnUsage 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 stuffwebpack --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="//unpkg.com/[email protected]/dist/react.min.js"></script><script type="text/javascript" src="//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 stuffwebpack --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": "//unpkg.com/[email protected]/dist/react.min.js",
"react-router-dom.js": "//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.endpoint
See: https://github.com/imcuttle/module-to-cdn#optionsendpoint
options.modules
See: https://github.com/imcuttle/module-to-cdn#optionsmodules
options.versionSeg
See: https://github.com/imcuttle/module-to-cdn#optionsversionseg
options.only
Type: Array<string|RegExp|(string) => boolean>
Default: null
List the only modules that should be served by the cdn
options.exclude
Type: Array<string|RegExp|(string) => boolean>
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: '@moyuyc/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💻 | | :---: | :---: | :---: | :---: |
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © Thomas Sileghem