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.

Answer 2

One option is to manually create your vendor chunks and then include whichever of those chunks needed for a page in the chunks option of HtmlWebpackPlugin.

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const Visualizer = require('webpack-visualizer-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        home: './src/js/page-types/home.js',
        product: './src/js/page-types/product.js',
        cart: './src/js/page-types/cart.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist/js')
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                'vendor-bootstrap': {
                    name: 'vendor-bootstrap',
                    test: /[\\/]node_modules[\\/](jquery|bootstrap)[\\/]/,
                    chunks: 'initial',
                    priority: 2
                },
                'vendor-react': {
                    name: 'vendor-react',
                    test: /[\\/]node_modules[\\/]react.*?[\\/]/,
                    chunks: 'initial',
                    priority: 2
                },
                'vendor-all': {
                    name: 'vendor-all',
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'initial',
                    priority: 1
                },
            }
        }
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new Visualizer(),
        new HtmlWebpackPlugin({
            filename: 'home.html',
            chunks: ['vendor-bootstrap', 'vendor-all', 'home']
        }),
        new HtmlWebpackPlugin({
            filename: 'product.html',
            chunks: ['vendor-bootstrap', 'vendor-react', 'vendor-all', 'product']
        }),
        new HtmlWebpackPlugin({
            filename: 'cart.html',
            chunks: ['vendor-bootstrap', 'vendor-react', 'vendor-all', 'cart']
        }),
    ], ...

The vendor-all chunk is to catch any other vendor libraries that are not included in the other chunks.