@talend/dynamic-cdn-webpack-plugin
v14.0.0
Published
Dynamically get your dependencies from a cdn rather than bundling them in your app
Downloads
2,149
Maintainers
talend-frontendReadme
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. We start to fork after month without update and because we need to ship our libs and project over CDN leverage UMD builds.
The underlying module-to-cdn for the same reason has also been forked https://npmjs.org/package/@talend/module-to-cdn.
Install
$ npm install --save-dev @talend/dynamic-cdn-webpack-plugin @talend/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('@talend/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="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 { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin');
module.exports = {
entry: {
'app': './src/app.js'
},
output: {
path.resolve(__dirname, './build'),
},
plugins: [
new WebpackManifestPlugin({
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": "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('@talend/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.loglevel
Type: string
Default: ERROR
Options: ERROR, INFO, DEBUG
ERROR:
- module XX could not be loaded because peerDependency YY is not loaded
INFO:
- module XX already loaded in another version
DEBUG:
- module XX could not be found in cdn config
- module XX will be served http://mycdn.com/XX/version/xx.min.js
options.resolver
Type: string, function
Default: '@talend/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.
options.addURL
Type: function
This function should be aligned with the resolver to support dependencies manifest. It take builted info from it and add cdn url to the info structure to have align values.
Related
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
License
MIT © Thomas Sileghem