html-dependency-webpack-plugin v1.0.0

html-dependency-webpack-plugin

Webpack plugin making HtmlWebpackPlugin include dependencies

Usage

This plugin is designed to be use with multiple entry points that use chunks splitting. By default html-webpack-plugin includes either all the chunks it founds or only the ones specified in chunks entry of its config.

Usage example

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlDependencyWebpackPlugin = require('html-dependency-webpack-plugin');

module.exports = {
    entry: {
        home: './src/pages/home.js',
        registration: './src/pages/registration.js',
        hub: './src/pages/hub.js',
    },
    output: { /* ... */ },
    optimization: {
        splitChunks: {
            chunks: 'all',
            minChunks: 2,
        },        
    },
    plugins: [
        new HtmlWebpackPlugin({
            hash: true,
            filename: 'home.html',
            template: './public/template.html',
        }),
        new HtmlWebpackPlugin({
            hash: true,
            filename: 'registration.html',
            template: './public/template.html',
        }),
        new HtmlWebpackPlugin({
            hash: true,
            filename: 'hub.html',
            template: './public/template.html',
        }),
        new HtmlDependencyPlugin(),
    ]
};

For instance, if the splitChunks extracts common chunks to the files vendors~home~registration~hub.js and registration~hub.js, there will be 3 files:

1. home.html containing

   <script src="vendors~home~registration~hub.js"></script>
   <script src="home.js"></script>

2. registration.html containing

   <script src="vendors~home~registration~hub.js"></script>
   <script src="registration~hub.js"></script>
   <script src="registration.js"></script>

3. hub.html containing

   <script src="vendors~home~registration~hub.js"></script>
   <script src="registration~hub.js"></script>
   <script src="hub.js"></script>