Why doesn't live reloading work in WebPack v5?

• 0
  Live reloading stopped working after updating WebPack v5.
  
  PS hot not used before, just 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(),
  	],
  });

  JavaScript Anonymous, Jan 28, 2020

---

0 Answers