Hot Module Replacement not reloading on updating html content, but reloads on css and js on webpack 5

Here is my settings for webpack and packages json . I am using 2 entry points for html files. Somehow HMR reloades page with css and js changes, but not with html content changes. I’ve tried a lot of suggestions from stackoverflow and github issues, nothing helped. I will be appreciated for any help.

const isDev = process.env.NODE_ENV === "development"

const filename = ext => isDev ? `[name].${ext}` : `[name].[contenthash].${ext}`;

const plugins = [
    new HTMLWebpackPlugin({
        template: 'index.html',
        favicon: './favicon.ico',
        filename: 'index.html',
        minify: {
            collapseWhitespace: !isDev
        },
        chunks: ['main']
    }),
    new HTMLWebpackPlugin({
        template: './another.html',
        favicon: './favicon.ico',
        filename: 'another.html',
        minify: {
                collapseWhitespace: !isDev
        },
        chunks: ['analytics']
    }),
    new MiniCssExtractPlugin({
        filename: filename('css'),
    }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
]

    const cssLoaders = (loader) => {
        const loaders = [
            { loader: MiniCssExtractPlugin.loader },
            'css-loader'
        ];
        if (loader) { loaders.push(loader) }
        return loaders
    }


module.exports = {
    context: path.resolve(__dirname,'src'),
    mode: 'development',
    target: process.env.NODE_ENV === "development" ? "web" : "browserslist",
    entry: {
        main: {
            import: ['@babel/polyfill', './index.js']
        },
        analytics: ['./analytics.js'],
    },
    output: {
        filename: filename('js'),
        path: path.resolve(__dirname, 'dist'),
        chunkFilename: "[name].bundle.js"
    },
    resolve: {
        extensions: ['.js','.json','.png'],
        alias: {
            '@assets': path.resolve(__dirname, 'src/assets'),
            '@js': path.resolve(__dirname,  "src/js"),
            '@css': path.resolve(__dirname, "src/css")
        }
    },
    devServer: {
        historyApiFallback: true,
        open: true,
        compress: true,
        hot: true,
        port: 5000,
        inline: true,
    },
    plugins,
    devtool: isDev ? 'source-map' : false,
    optimization: {
        splitChunks: {
            chunks: 'all'
        },
        runtimeChunk: 'single',
        minimize: !isDev,
        minimizer: [
            new CssMinimizerPlugin(),
            new TerserPlugin()
        ],
    },
    module: {
        rules: [
            {
                test: /.m?js$/,
                exclude: /node_modules/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-proposal-class-properties']
                  }
                }
            },
            {
                test: /.css$/,
                use: cssLoaders()
            },
            {
                test: /.s[ac]ss$/i,
                use: cssLoaders('sass-loader')
            },
            {
                test: /.(png|jpg|svg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: "[name].[ext]"
                    }
                }]
            },
            {
                test: /.(ttf|woff|woff2|eot)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
        ]
    }
}

and `package.json` scripts

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development npx webpack --mode development",
    "build": "cross-env NODE_ENV=production npx webpack --mode production",
    "watch": "cross-env NODE_ENV=development npx webpack --mode development --watch",
    "server": "cross-env NODE_ENV=development webpack serve --mode development --open"
  }
}

Source: Ask Javascript Questions

LEAVE A COMMENT