How can I get hot reloading (HMR) running with Webpack 5?

Question

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.

I read this article and followed the instructions: https://webpack.js.org/guides/hot-module-replacement/

This is my webpack config:

{
  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: { ... }
  }
}

I am using:

• webpack 5.7.0
• webpack-cli 4.2.0
• react 16.13
• node 14.15.1
• npm 6.14.8

I start webpack with this command: webpack serve --host 0.0.0.0 --config config/webpack.dev.js

What do I do wrong? Thanks for your help. :)

Answer 1

I believe it's a bug in webpack-dev-server v3 https://github.com/webpack/webpack-dev-server/issues/2758 when you're using it with webpack 5 and browserslist. You can wait for webpack-dev-server v4 https://github.com/webpack/webpack-dev-server/pull/2592#issuecomment-734400875, it will come soon, or use target: 'web' for the moment under your development mode.