Почему не работает live reloading в WebPack v5?

Question

igoryusha22 @igoryusha22

Почему не работает live reloading в WebPack v5?

После обновления WebPack v5 перестал работать live reloading.

PS hot прежде не использовал, сейчас попробовал, пишет `[HMR] Waiting for update signal from WDS...)`, но за изменениями не следит.

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"
  }
}

Конфиги:
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(),
	],
});