How to make hot reload work in webpack 5?

Question

webpack

Outputs a single line to the console - [HMR] Waiting for update signal from WDS..
And nothing else.
When changing files, everything compiles successfully, but you have to restart manually - the development speed suffers.

webpack.config.js

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

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const filename = (ext) => (isDev ? `bundle.${ext}` : `bundle.[hash].${ext}`)

const jsLoaders = () => {
  const loaders = [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
      },
    },
  ]

  if (isDev) {
    loaders.push('eslint-loader')
  }

  return loaders
}

module.exports = {
  context: path.resolve(__dirname, './src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, './dist'),
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core'),
    },
  },
  devtool: isDev ? 'source-map' : false,
  devServer: {
    contentBase: path.join(__dirname, '../'), // попытки починить
    compress: true, // попытки починить
    port: 9000,
    hot: isDev,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // попытки починить
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: 'index.html',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd,
      },
    }),
    new CopyPlugin([
      {
        from: path.resolve(__dirname, 'src/favicon.ico'),
        to: path.resolve(__dirname, 'dist'),
      },
    ]),
    new MiniCssExtractPlugin({
      filename: filename('css'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: isDev,
              reloadAll: true,
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: jsLoaders(),
      },
    ],
  },
}

package.json

{
  "name": "weij33t",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },
  "keywords": [
    "js",
    "javascript",
    "excel"
  ],
  "private": true,
  "browserslist": "> 0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.2",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "eslint": "^6.8.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^3.0.4",
    "html-webpack-plugin": "^5.0.0-alpha.10",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "webpack": "^5.3.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "normalize.css": "^8.0.1"
  }
}

Answer 1

If still relevant, I found a solution to this problem here: https://github.com/webpack/webpack-dev-server/issu... .
Briefly, the problem is with .browserslist .
You need to add this check to webpack.config.js:

target: process.env.NODE_ENV === "development" ? "web" : "browserslist",

Something like this)
And also in Webpack 5, the call to the dev server has changed.

"start": "cross-env NODE_ENV=development webpack serve"

Answer 2

This problem occurs after the browserslist
package is included Must be added to webpack.config.js

{
   target: 'web'
}

Answer 3

Since the Webpack5 update, we've all been using an unadapted webpack-dev-server from seven months ago.
Everything started working fine for me after:
1) webpack.config.jspn => add target: "web", to module.exports = {}
2) Removing both browserslist as a file and as an item in package.json
3) Reading: https ://openbase.io/js/webpack-dev-server/versions...
4) npm i [email protected]
5) devServer: {
static: true
}
success...