How to use Webpack 4 SplitChunksPlugin with HtmlWebpackPlugin for Multiple Page Application?

Question

I\'m trying to utilize the SplitChunksPlugin to produce separate bundles per each page/template in a MPA. When I use the HtmlWebpackPlugin, I get an html file for each page

Answer 1

Use version4 of html-webpack-plugin (which is in beta now), and only include the entry chunk in the chunks option.

npm i -D html-webpack-plugin@next

and

module.exports = {
    new HtmlWebpackPlugin({
        filename: 'home.html',
        chunks: ['home']
    }),
    new HtmlWebpackPlugin({
        filename: 'product.html',
        chunks: ['product']
    }),
    new HtmlWebpackPlugin({
        filename: 'cart.html',
        chunks: ['cart']
    }),
};

This will include related chunks automatically.