webpack-dev-server 拒絕熱重載 html 文件

Question

使用webpack-dev-server時，當我對 javascript 文件進行更改時，更改會立即反映在網頁上。

但是，當我對 HTML 文件進行更改時，網站並沒有反映出來。 為了看到新的 html 頁面，我必須先運行webpack --mode production ，然后，如果我重新運行webpack-dev-server --hot --mode development ，我可以看到新的 HTML 變化。

這很煩人，我希望像 javascript 代碼一樣熱重載我的 html 更改。 有沒有我想念的把戲？ 我花了一整天的時間在谷歌上搜索和玩選項。 唯一有幫助的是添加

devServer:
...
  devMiddleware: {
    writeToDisk: true
  },

根據這個答案到我的webpack.config.js 。 但是，這有以下問題：每次發生熱重載時，我的 output dist/文件夾都會被帶有校驗和名稱的.js文件堵塞，這也很煩人。

---

我的項目樹：

完整的webpack.config.js ：

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

module.exports = {
    entry: './src/index.ts',
    watch: true,
    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: '/dist/'
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My app",
            template: "./src/index.html",
            /* This output directory is relative to the **OUTPUT** 'publicPath'!

               So, if you were to write "./dist/index.html" below, it would output it in "./dist/dist/index.html"!

               (You can verify this by running `npx webpack --watch` and looking what files it touches/generates.)
             */
            filename: "index.html",
            inject: "body"
        })
    ],

    devServer: {
        // devMiddleware: { writeToDisk: true },
        static: {
            directory: path.join(__dirname, "dist"),
            watch: true
        },
        compress: true,

        webSocketServer: 'ws',
        host: '0.0.0.0',
        port: 10000,

        /* Ensure I can access the server directly, without incurring the 'invalid host header' error */
        allowedHosts: "all",

        /* So that the webpack-dev-server reloads when I change the index.html file, even though it isn't explicitly listed anywhere. */
        watchFiles: ['src/**/*'],

        open: true,
        hot: true,
    },
};

Answer 1

沒關系，我發現了問題：

不幸的是，Stackoverflow 不支持行號，但如果您查看我原來問題中的webpack.config.js代碼，您會發現以下代碼：

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

publicPath參數似乎是導致問題的原因。 刪除它使熱重載“魔法”自動檢測到我已經更改了 HTML 文件，並重新部署它。