webpack-dev-server无法热重载HTML文件的问题求助

问题情况 #

• 用webpack-dev-server开发时，改JS文件网页能立刻刷新，但改HTML模板后，网页完全没反应，必须先跑webpack --mode production打包，再重启webpack-dev-server --hot --mode development才能看到变化，太麻烦。
• 试过开devMiddleware.writeToDisk: true能实现HTML热重载，但每次热重载都会在dist目录生成带校验和的.js文件，目录很快就臃肿了。

配置调整方案 #

直接改webpack.config.js里的几个地方就行：

1. 修正output.publicPath
   当前publicPath: '/dist/'会导致资源路径冲突，改成'/'：

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 改这里
},

2. 调整devServer.static目录
   把static的directory改成项目根目录，让devServer能正确监听生成的index.html：

devServer: {
    static: {
        directory: path.join(__dirname, '.'), // 改成项目根目录
        watch: true
    },
    // 其他配置不动
}

3. 明确监听HTML模板文件
   虽然已经配置了watchFiles: ['src/**/*']，但直接把HTML文件加进去更保险，确保HtmlWebpackPlugin能立刻感知变化：

devServer: {
    // 其他配置
    watchFiles: ['src/index.html', 'src/**/*'], // 加上HTML文件
},

4. 删掉冗余的watch配置
   根配置里的watch: true可以删掉，因为webpack-dev-server本身就带监听功能，重复配置容易出问题：

// 把这行删掉
// watch: true,

修改后的完整配置 #

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My app",
            template: "./src/index.html",
            filename: "index.html",
            inject: "body"
        })
    ],

    devServer: {
        static: {
            directory: path.join(__dirname, '.'),
            watch: true
        },
        compress: true,
        webSocketServer: 'ws',
        host: '0.0.0.0',
        port: 10000,
        allowedHosts: "all",
        watchFiles: ['src/index.html', 'src/**/*'],
        open: true,
        hot: true,
    },
};

效果说明 #

改完重启webpack-dev-server，现在改src/index.html的时候，HtmlWebpackPlugin会自动重新生成dist/index.html，devServer能立刻检测到变化并刷新网页，而且不会再生成那些带校验和的冗余JS文件，目录也不会臃肿了。

内容的提问来源于stack exchange，提问作者Maxim Blinov