title: How can I get hot reloading (HMR) running with Webpack 5?
body: <p>I am trying to get HMR running with webpack v5, but it does not work. When I modify and save a file, webpack re-compiles the project correctly, but the frontend does not update.</p>
  <p>I read this article and followed the instructions: <a href="https://webpack.js.org/guides/hot-module-replacement/" rel="noreferrer">https://webpack.js.org/guides/hot-module-replacement/</a></p>
  <p>This is my webpack config:</p>
  <pre><code>{
    mode: 'development',
    entry: {
      babelpoly: 'babel-polyfill',
      app: [ './src/index.js', './src/app.js' ]
    },
    plugins: [
      BundleStatsWebpackPlugin { ... },
      DefinePlugin { ... },
      HtmlWebpackPlugin { ... }
    ],
    stats: { ... },
    output: {
      path: '[pathTo]/dist',
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js'
    },
    optimization: {
      splitChunks: { chunks: 'all' },
      runtimeChunk: 'single',
      usedExports: true,
      mergeDuplicateChunks: true
    },
    module: {    
      rules: [
        {
          test: /\.(s[ac]ss)$/i,
          include: path.resolve(ROOT, 'src'),
          use: [
              'style-loader', // Creates `style` nodes from JS strings
              {
              loader: 'css-loader', // Translates CSS into CommonJS
              options: {
                  modules: {
                  mode: 'local',
                  localIdentName: devMode
                      ? '[name]_[local]-[hash:base64:3]'
                      : '[local]-[hash:base64:5]',
                  },
              },
              },
              {
              loader: 'sass-loader', // compiles Sass to CSS
              options: {
                  implementation: require('sass'),
              },
              },
          ],
        },
        {
          test: /\.css$/,
          include: [path.join(ROOT, 'node_modules')],
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: ['file-loader'],
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: ['file-loader'],
        },
        {
          test: /\.m?jsx?$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'entry',
                    corejs: 3,
                  },
                ],
                '@babel/preset-react',
              ],
              plugins: [['@babel/plugin-proposal-class-properties', {loose: true}]],
            },
          },
        },
      ],
    },
    resolve: {
      extensions: [ ... ],
      alias: {
        ...
      },
      modules: [
        ...
      ]
    },
    devtool: 'inline-source-map',
    devServer: {
      port: 3003,
      contentBase: '[pathTo]/dist',
      host: '0.0.0.0',
      hot: true,
      compress: true,
      disableHostCheck: true,
      historyApiFallback: true,
      overlay: { warnings: true, errors: true },
      stats: { ... }
    }
  }
  </code></pre>
  <p>I am using:</p>
  <ul>
  <li>webpack 5.7.0</li>
  <li>webpack-cli 4.2.0</li>
  <li>react 16.13</li>
  <li>node 14.15.1</li>
  <li>npm 6.14.8</li>
  </ul>
  <p>I start webpack with this command: webpack serve --host 0.0.0.0 --config config/webpack.dev.js</p>
  <p>What do I do wrong? Thanks for your help. :)</p>