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
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!