html-webpack-include-sibling-chunks-plugin
This plugin is useful when bundling a Multiple-Page Application with webpack 4.
It let html-webpack-plugin
to include initial split chunks and runtime chunk that related to the entry js file of a html page,
which are generated by optimization.splitChunks
and optimization.runtimeChunk
(https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693).
Suppose your MPA has the following structure (check the example folder):
├── dist
├── package.json
├── node_modules
├── src
│ ├── components
│ ├── shared
| ├── favicon.png
│ └── pages
| ├── foo // http://localhost:8080/foo.html
| | ├── index.html
| | ├── index.js
| | ├── style.css
| | └── pic.png
| └── bar // http://localhost:8080/bar.html
| ├── index.html
| ├── index.js
| ├── style.css
| └── baz // http://localhost:8080/bar/baz.html
| ├── index.html
| ├── index.js
| └── style.css
└── webpack.config.js
You can bundle the site using this webpack config: (check the full file: example/webpack.config.js)
const HtmlWebpackPlugin = const HtmlWebpackIncludeSiblingChunksPlugin = const glob = const dev = BooleanprocessenvWEBPACK_SERVE const entries = globconst entry = {}const htmlPlugins = for const path of entries const template = path const chunkName = path // in order to hot reload in dev, we put template file into the entry entrychunkName = dev ? path template : path htmlPlugins moduleexports = entry optimization: runtimeChunk: true splitChunks: chunks: 'all' plugins: // ... // must be placed before html-webpack-plugin ...htmlPlugins // ...
entry
and htmlPlugins
will be generated by parsing the folder structure. for example:
entry:
'bar/baz': './src/pages/bar/baz/index.js' bar: './src/pages/bar/index.js' foo: './src/pages/foo/index.js'
htmlPlugins:
template: './src/pages/bar/baz/index.html' filename: 'bar/baz.html' chunksSortMode: 'none' chunks: 'bar/baz' template: './src/pages/bar/index.html' filename: 'bar.html' chunksSortMode: 'none' chunks: 'bar' template: './src/pages/foo/index.html' filename: 'foo.html' chunksSortMode: 'none' chunks: 'foo'
This plugin will insert split chunks and runtime chunk that splitted from chunks
of HtmlWebpackPlugin
into the html file.
Running the example project
cd examplenpm installnpm run dev
Open http://localhost:8080/foo.html to check the result.
Building the production bundle:
npm run build