如果启用了热模块替换，为什么在更改 HTML 时 LiveReload 在 Webpack 中不起作用？

如果你设置hot: true in the devServer设置在Webpack，那么模块热更换CSS 有效，并且无需重新加载完整页面即可应用更改。但是当改变HTML文件时，实时重载由于某种原因不起作用，您需要手动刷新页面才能应用更改。

If hot: true被禁用于devServer配置文件，然后更改 HTML 文件时实时重载工作正常，页面会自行重新加载，但是模块热更换因为 CSS 不起作用，当更改 CSS 时，页面会完全重新加载。

这是应该的方式吗？为什么会发生这种情况，我该如何启用模块热更换对于CSS，但同时使实时重载更改 HTML 文件时有效吗？

为了创建许多 HTML 文件，我使用HtmlWebpackPlugin plugin.

以下是配置文件：

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(),
    ],
});
};

如果您的问题仍然存在，请在启用 hmr 的情况下尝试以下操作：

1. npm i chokidar --save-dev

2. 添加到 webpack 配置文件：const chokidar = require('chokidar')

3. 添加到 webpack-dev-server 选项：

        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');
            });
        },