Why doesn't LiveReload work in Webpack when changing HTML if Hot Module Replacement is enabled?

Question

If you set hot: true in the devServer settings in Webpack, then the Hot Module Replacement for CSS works and the changes are applied without a complete page reload. But when changing HTML files, LiveReload for some reason does not work, you need to refresh the page manually so that the changes are applied.

If hot: true is disabled in the devServer configuration file, then when changing HTML files LiveReload works fine, the page reloads itself, but the Hot Module Replacement for CSS does not work, when changing CSS the page reloads completely.

Is this the way it should be? Why is this happening, how can I enable Hot Module Replacement for CSS, but at the same time make LiveReload work when changing HTML files?

To create many HTML files, I use the HtmlWebpackPlugin plugin.

Below are the configuration files:

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');

module.exports = mode => {
const PRODUCTION = mode === 'production';

return {
    entry: {
        app: './src/index.js',
    },
    output: {
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'img/[path][name].[ext]',
                            outputPath: 'img',
                        },
                    },
                ],
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            hash: false,
            template: 'src/index.html',
            filename: 'index.html',
        }),
        new webpack.DefinePlugin({
            PRODUCTION: PRODUCTION,
        }),
        new CopyPlugin([
            { from: 'src/img', to: 'img' },
            { from: 'src/fonts', to: 'fonts' },
        ]),
    ],
}
};

webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = (env, argv) => {

return merge(common(argv.mode), {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        overlay: {
            warnings: true,
            errors: true
        },
        port: 8081,
        hot: true,
    },
    watchOptions: {
        aggregateTimeout: 100,
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.css$/i,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            }
        ],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ],
});
};

Answer 1

If your question is still actual try the following with hmr enabled:

1. npm i chokidar --save-dev

2. add to webpack config file: const chokidar = require('chokidar')

3. add to webpack-dev-server options:

        before(app, server) {
            chokidar.watch([
                './build/**/*.html' //make sure to edit this path to your html files
            ]).on('all', function () {
                server.sockWrite(server.sockets, 'content-changed');
            });
        },