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 dynamic-cdn-webpack-plugin@3.4.1 module-to-cdn
`

Usage with HtmlWebpackPlugin

webpack.config.js

`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

`js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';

// ... do react stuff
`

webpack --mode=production will generate:

`js
/ 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);

/ ... /
})]
`

`html









`

Usage with ManifestPlugin

webpack.config.js

`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

`js
import React from 'react';
import { BrowserRouter } from 'react-router-dom';

// ... do react stuff
`

webpack --mode=production will generate:

`js
/ 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);

/ ... /
})]
`

`json
{
"app.js": "app.js",
"react.js": "https://unpkg.com/react@15.5.3/dist/react.min.js",
"react-router-dom.js": "https://unpkg.com/react-router-dom@4.1.1/umd/react-router-dom.min.js"
}
`

API

$3

webpack.config.js

`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
Default: null

List the only modules that should be served by the cdn

#### options.exclude

Type: Array
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

- html-webpack-plugin
- module-to-cdn

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