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

问题描述

如果在 Webpack 的 devServer 设置中将 hot:true 设置为 Hot Module Replacement CSS可以正常工作，并且无需重新加载完整页面即可应用更改.但是在更改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.

如果在 devServer 配置文件中禁用了 hot:true ，则在更改HTML文件时 LiveReload 可以正常工作，页面会自动重新加载，但是CSS的替换热模块不起作用，当更改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启用热模块替换，但同时在更改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');
         });
     },

这篇关于如果启用了“热模块替换"，为什么在更改HTML时LiveReload在Webpack中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！