Dynamically get your dependencies from a cdn rather than bundling them in your app
NOTE: This module is a fork of https://github.com/mastilver/dynamic-cdn-webpack-plugin to support Webpack 5, and use Typescript.
$ npm install --save-dev @forivall/dynamic-cdn-webpack-plugin
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const DynamicCdnWebpackPlugin = require('@forivall/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>webpack.config.js
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const DynamicCdnWebpackPlugin = require('@forivall/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": "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('@forivall/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.
Type: boolean
Default: !loadScripts (true, unless options.loadScripts is true)
Inject the CDN script tags into the HtmlWebpackPlugin, if available
Type: boolean
Default: false
Instead of expecting the scripts to already be loaded via a <script src="..."></script> in the html, load them dynamically.
Uses webpack externalsType.script
Thanks goes to these wonderful people (emoji key):
 Thomas Sileghem 💻 📖 |
 Faizaan 💬 💻 📖 |
 MICHAEL JACKSON 💡 |
 fedeoo 💻 |
 Kevin Malakoff 💻 |
 Krystian Kuczek 💻 |
 Emily Marigold Klassen 💻 🚇 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT © Thomas Sileghem