When using webpack-dev-server, when I make changes to the javascript file the changes are immediately reflected on the webpage.

However, when I make a change to the HTML file, the website does not reflect them. In order to see the new html page, I must first run webpack --mode production, and then, if I re-run webpack-dev-server --hot --mode development, I can see the new HTML changes.

This is quite annoying and I'd like my html changes to be hot-reloaded just like the javascript code. Is there a trick I'm missing? I've spent all day googling and playing with options. The only thing that has helped is to add

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

to my webpack.config.js as per

The full 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,
    },
};

CodePudding user response：

Nevermind, I have found the issue:

Unfortunately Stackoverflow doesn't support line numbers, but if you look in the webpack.config.js code in my original question, you will find the following code:

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

That publicPath parameter appears to be what was causing the problem. Removing it made the hot-reload 'magic' autodetect that I've changed the HTML file, and re-deploy it.