webpack-external-plugin
plugin for load bundles and externals
Install
npm i --save-dev webpack-external-pluginyarn add --dev webpack-external-pluginThis is a webpack plugin that create a script to load all the chunks and externals to html.
Chunks generated by webpack and externals would load according to the calling order.
Usage
The plugin will generate a js file for you that includes all the public path of your webpack bundles and externals.
Just add the plugin to your webpack config as follow:
webpack.config.js
module.exports = {
entry: 'index.jsx',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js',
publicPath: '/',
},
plugins: [
new WebpackExternalPlugin()
],
externals: {
react: 'React',
'react-dom': 'react-dom'
}
}This will generate a file dist/load-main.js to load all the files.
If you have multiple webpack entry points, each one would have a corresponding file called load-[name].js, includes the entry point and externals in the entry.
If there are css files output, they will be added to the generated load files as well.
Actually, all the generated chunks whose filename not end with .map would be added to load files.
The plugin is only suggested to use with production env
Use with html-webpack-plugin
If you want to use with html-webpack-plugin, there is nothing else need to do.
module.exports = {
...,
plugins: [
new WebpackExternalPlugin(),
new HtmlWebpackPlugin()
],
}The html file would be like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="load-index_bundle.js"></script>
</body>
</html>Options
You can pass a hash of configuration options to webpack-external-plugin. Allowed values are as follows
| Name | Type | Default | Description |
|---|---|---|---|
filename |
{String} |
load-[name].js |
The file to write the generated code to. Defaults to load-[name].js like load-main.js. |
externals |
{String[]} |
[] |
Array of file path you want to load external, like external stylesheets |
cdnPath |
`{String | Function}` | https://unpkg.com/[package]@[version] |
hash |
{Boolean} |
true |
Add hash to chunk path(not for externals) |
Specify filename
The plugin will output file to load-[name].js default, like load-main.js.
You can specify a name with params like [name].js, [id].js or [hash].js.
Do not make the loader filename same as the bundle out name.
For example, webpack.output.name is '[name].js',
and webpack-external-plugin.options.filename is '[name].js' as well
Specify cdnPath
You can specify cdn path for external package as follow
options.cdnPath accept string|Function
// https://unpkg.com/[package]@[version]
lodash@4.1.0 => https://unpkg.com/lodash@4.1.0
The string type url accept package and version as params, webpack-external-plugin will resolve the node_modules to get installed version of the dependencies.
Sometimes you want to set different path for packages
For example: react
const list = {
react: 'https://unpkg.com/react@16.4.2/umd/react.production.min.js',
'react-dom': 'https://unpkg.com/react-dom@16.4.2/umd/react-dom.production.min.js'
}
options.cdnPath = (package, version)=> {
return list[package];
}