Why doesn't live reloading work in WebPack v5?

Question

JavaScript

After updating WebPack v5, live reloading stopped working.

PS hot did not use before, now I tried it, writes `[HMR] Waiting for update signal from WDS...)`, but does not follow the changes.

package json

{
  "name": "webpack-configuration",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --config config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
    "start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js"
  },
  "browserslist": [
    "> 0.25%, not dead",
    "> 1%",
    "last 2 versions"
  ],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "autoprefixer": "^10.0.1",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.3.0",
    "cross-env": "^7.0.2",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-harddisk-plugin": "^1.0.2",
    "html-webpack-plugin": "^5.0.0-alpha.14",
    "mini-css-extract-plugin": "^1.3.0",
    "node-sass": "^5.0.0",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss": "^8.1.6",
    "postcss-loader": "^4.0.4",
    "sass-loader": "^10.0.5",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.0.3",
    "url-loader": "^4.1.1",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.3.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "jquery": "^3.5.1",
    "normalize.css": "^8.0.1"
  }
}

Configs:
base

const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');


const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

const PATHS = require('./paths');

const filename = ext => (isDev ? `[name].${ext}` : `[name].[fullhash].${ext}`);


module.exports = {
  // Входные файлы
  entry: {
    main: ['@babel/polyfill', `${PATHS.src}/index.js`],
  },
  
  // Выходные файлы
  output: {
    filename: `js/${filename('js')}`,
    path: `${PATHS.build}/`,
    publicPath: '/'
  },
  
  // Алиасы
  resolve: {
    extensions: ['.js', '.json'], 
    alias: {
      '@modules': `${PATHS.src}/modules`,
      '@': PATHS.src,
    },
  },
  
  // Плагины
  plugins: [

    // Сброка html
    new HTMLWebpackPlugin({
      template: `${PATHS.src}/index.html`,
      minify: {
        collapseWhitespace: isProd
      },
      chunks: ['main'],
    }),
    
    // Очистка от лишних файлов
    new CleanWebpackPlugin(),

    // Копирование картинок
    new CopyWebpackPlugin({
      patterns: [
        {
          from: `${PATHS.src}/${PATHS.assets}/image`,
          to: `${PATHS.build}/${PATHS.assets}/image`,
        },
      ],
    }),
  
    new MiniCssExtractPlugin({
      filename: `css/${filename('css')}`,
    }),
  ],
  
  // Файлы
  module: {
    rules: [
      // css
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ],
      },
      
      // sass/sccs
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ],
      },
      
      // images
      {
        test: /img\.svg$|\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '../',
              name: `assets/image/[name].[ext]`,
            }
          },
        ],
      },
      
      // fonts
      {
        test: /font\.svg$|\.(ttf|woff|woff2|eot)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: '../',
              name: `assets/fonts/[name].[ext]`,
            },
          },
        ],
      },
      
      // js
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-env'
              ]
            },
          },
        ],
      }
    ]
  },
};

Dev

const { merge } = require('webpack-merge');

// const webpack = require('webpack');

const base = require('./webpack.base');
const PATHS = require('./paths');

module.exports = merge(base, {

  mode: 'development',


  devtool: 'inline-source-map',


  optimization: {
    splitChunks: {
      chunks: 'all',
    }
  },


  devServer: {
    historyApiFallback: true,
    contentBase: PATHS.build,
    open: true,
    compress: true,
    // hot: true,
    inline: true,
    port: 5500,
  },

  plugins: [
    // Only update what has changed on hot reload
    // new webpack.HotModuleReplacementPlugin(),
  ],
});

Answer 1

Fix:
Write a "target" option in config.
for dev:
target: 'web',
for production:
target: 'browserslist',