title: Webpack HMR browser not outputting hot-update.json
body: <p>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:</p>
  <ol>
  <li><p>Start the server using <code>webpack --watch</code>
  This generates the following console output</p>
  <pre><code>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
  </code></pre>
  <p>My dist folder contains the following:</p>
  <pre><code>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
  </code></pre>
  </li>
  <li><p>Load the webpage in the browser checking the network logs
  This is where it attempts to access <code>GET http://localhost/3df194f7935a8d2781e4.hot-update.json</code> which is the hashcode from the previous build, however you can see it's not in the dist output</p>
  </li>
  <li><p>Make a modification to the browser code to trigger a HMR update. This generates the next output:</p>
  <pre><code>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
  </code></pre>
  <p>My dist folder contains the following:</p>
  <pre><code>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
  </code></pre>
  <p>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.</p>
  </li>
  </ol>
  <p>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?</p>
  <p>Here's a copy of what the webpack config looks like</p>
  <pre><code>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&amp;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',
          ],
        },
      ],
    },
  };
  </code></pre>