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

Question

如果您在 Webpack 中的 devServer 设置中设置 hot: true，则 CSS 的 热模块替换 有效，并且无需重新加载完整的页面即可应用更改.但是在更改 HTML 文件时，LiveReload 出于某种原因不起作用，您需要手动刷新页面以便应用更改。

如果hot: true 在devServer 配置文件中被禁用，那么在更改HTML 文件时LiveReload 工作正常，页面会自行重新加载，但热模块更换对于 CSS 不起作用，更改 CSS 时页面会完全重新加载。

这是应该的吗？为什么会发生这种情况，如何为 CSS 启用 Hot Module Replacement，同时在更改 HTML 文件时使 LiveReload 工作？

为了创建许多 HTML 文件，我使用了 HtmlWebpackPlugin 插件。

以下是配置文件：

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

如果您的问题仍然存在，请在启用 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');
            });
        },