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

2022-01-19 00:00:00 layout frontend javascript webpack webpack-4

如果你在Webpack的devServer设置中设置hot: true，那么Hot Module ReplacementCSS 可以工作，并且无需重新加载完整的页面即可应用更改.但是在更改 HTML 文件时，LiveReload 由于某种原因不起作用，您需要手动刷新页面以便应用更改.

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.

如果 hot: true 在 devServer 配置文件中被禁用，那么当更改 HTML 文件 LiveReload 工作正常时，页面会自行重新加载，但是 CSS 的 Hot Module Replacement 不起作用，更改 CSS 时页面会完全重新加载.

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.

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

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?

要创建许多 HTML 文件，我使用 HtmlWebpackPlugin 插件.

To create many HTML files, I use the 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 的情况下尝试以下操作:

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

  1. npm i chokidar --save-dev

添加到 webpack 配置文件:const chokidar = require('chokidar')

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

添加到 webpack-dev-server 选项:

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

相关文章