Webpack HMR browser not outputting hot-update.json

Question

I'm running webpack with the --watch command to compile my browser code with the webpack.HotModuleReplacementPlugin. It seems that it keeps looking for a http://localhost/3df194f7935a8d2781e4.hot-update.json which doesn't get generated until the next update occurs. Here's the flow:

1. Start the server using webpack --watch This generates the following console output

   webpack is watching the files…
   
       Hash: 3df194f7935a8d2781e4
       Version: webpack 4.43.0
       Child
           Hash: 3df194f7935a8d2781e4
           Time: 7198ms
           Built at: 07/18/2020 3:07:15 PM
                                           Asset       Size     Chunks                         Chunk Names
                   app.3df194f7935a8d2781e4.js    617 KiB        app  [emitted] [immutable]  app
               app.3df194f7935a8d2781e4.js.map    539 KiB        app  [emitted] [dev]        app
                                       app.css    490 KiB        app  [emitted]              app
                                   app.css.map    514 KiB        app  [emitted] [dev]        app
                                    index.html  430 bytes             [emitted]
                 react.3df194f7935a8d2781e4.js    906 KiB      react  [emitted] [immutable]  react
             react.3df194f7935a8d2781e4.js.map   1.03 MiB      react  [emitted] [dev]        react
                 icons.3df194f7935a8d2781e4.js    510 KiB      icons  [emitted] [immutable]  icons
             icons.3df194f7935a8d2781e4.js.map    520 KiB      icons  [emitted] [dev]        icons
   

   My dist folder contains the following:

   app.3df194f7935a8d2781e4.js
   app.3df194f7935a8d2781e4.js.map
   app.css
   app.css.map
   index.html
   react.3df194f7935a8d2781e4.js
   react.3df194f7935a8d2781e4.js.map
   icons.3df194f7935a8d2781e4.js
   icons.3df194f7935a8d2781e4.js.map
   

2. Load the webpage in the browser checking the network logs This is where it attempts to access GET http://localhost/3df194f7935a8d2781e4.hot-update.json which is the hashcode from the previous build, however you can see it's not in the dist output

3. Make a modification to the browser code to trigger a HMR update. This generates the next output:

   Hash: e758918f37c9e4eaa07f
   Version: webpack 4.43.0
   Child
       Hash: e758918f37c9e4eaa07f
       Time: 2112ms
       Built at: 07/18/2020 3:14:27 PM
                                            Asset       Size     Chunks                               Chunk Names
             3df194f7935a8d2781e4.hot-update.json   45 bytes             [emitted] [immutable] [hmr]  
           app.3df194f7935a8d2781e4.hot-update.js    3.8 KiB        app  [emitted] [immutable] [hmr]  app
       app.3df194f7935a8d2781e4.hot-update.js.map   1.38 KiB        app  [emitted] [dev]              app
                                          app.css    490 KiB        app  [emitted]                    app
                                      app.css.map    514 KiB        app  [emitted] [dev]              app
                      app.e758918f37c9e4eaa07f.js    617 KiB        app  [emitted] [immutable]        app
                  app.e758918f37c9e4eaa07f.js.map    539 KiB        app  [emitted] [dev]              app
                                       index.html  430 bytes             [emitted]                    
                    react.e758918f37c9e4eaa07f.js    906 KiB      react  [emitted] [immutable]        react
                react.e758918f37c9e4eaa07f.js.map   1.03 MiB      react  [emitted] [dev]              react
                    icons.e758918f37c9e4eaa07f.js    510 KiB      icons  [emitted] [immutable]        icons
                icons.e758918f37c9e4eaa07f.js.map    520 KiB      icons  [emitted] [dev]              icons
   

   My dist folder contains the following:

   3df194f7935a8d2781e4.hot-update.json
   app.3df194f7935a8d2781e4.hot-update.js
   app.3df194f7935a8d2781e4.hot-update.js.map
   app.3df194f7935a8d2781e4.js
   app.3df194f7935a8d2781e4.js.map
   app.css
   app.css.map
   app.e758918f37c9e4eaa07f.js
   app.e758918f37c9e4eaa07f.js.map
   index.html
   react.3df194f7935a8d2781e4.js
   react.3df194f7935a8d2781e4.js.map
   react.e758918f37c9e4eaa07f.js
   react.e758918f37c9e4eaa07f.js.map
   icons.3df194f7935a8d2781e4.js
   icons.3df194f7935a8d2781e4.js.map
   icons.e758918f37c9e4eaa07f.js
   icons.e758918f37c9e4eaa07f.js.map
   

   So my dist ouput now contains the hot-update it was looking for 2 steps ago, but doesn't contain the current hot-update.json that the website will now be looking for.

So the basic question here is how do I get my webpack watch to output the hot-update.json file for the current build, not the previous build?

Here's a copy of what the webpack config looks like

import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import * as webpack from 'webpack';

let extensions = ['.ts', '.tsx', '.js', '.json', '.html', '.mjs'];

export const clientConfig: webpack.Configuration = {
  entry: {
    app: [
      'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
      './src/browser/app.tsx',
    ],
  },
  target: 'web',
  externals: {},
  optimization: {
    splitChunks: {
      cacheGroups: {
        react: {
          chunks: 'all',
          name: 'react',
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
        },
        icons: {
          chunks: 'all',
          name: 'icons',
          test: /[\\/]node_modules[\\/](@someone[\\/]icons)[\\/]/,
        },
      },
    },
  },
  output: {
    chunkFilename: '[name].[hash].js',
    filename: '[name].[hash].js',
    path: __dirname + '/dist/browser',
    publicPath: `/`,
  },
  resolve: {
    extensions,
  },
  devtool: 'source-map',
  mode: 'development',
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      chunks: ['app'],
      filename: 'index.html',
      template: 'src/browser/app.html',
      title: 'scaffold-typescript-website--express-react',
    }),
    new webpack.HotModuleReplacementPlugin({}),
  ],
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [{ loader: require.resolve('react-svg-loader') }],
      },

      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,
        use: {
          loader: 'ts-loader',
          options: {
            configFile: 'tsconfig.dev.json',
          },
        },
      },

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: 'pre', loader: 'source-map-loader', test: /\.js$/ },

      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              config: {
                ctx: {
                  minify: true,
                },
              },
            },
          },
          // To use this npm install --save-dev sass-loader node-sass
          // 'sass-loader',
        ],
      },
    ],
  },
};