Javascript 如何使用Webpack 5运行热重新加载（HMR）？

我试图让HMR与WebpackV5一起运行，但它不起作用。当我修改并保存文件时，webpack会正确地重新编译项目，但前端不会更新

我阅读了这篇文章并按照说明进行了操作：

这是我的网页配置：

{
  mode: 'development',
  entry: {
    babelpoly: 'babel-polyfill',
    app: [ './src/index.js', './src/app.js' ]
  },
  plugins: [
    BundleStatsWebpackPlugin { ... },
    DefinePlugin { ... },
    HtmlWebpackPlugin { ... }
  ],
  stats: { ... },
  output: {
    path: '[pathTo]/dist',
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js'
  },
  optimization: {
    splitChunks: { chunks: 'all' },
    runtimeChunk: 'single',
    usedExports: true,
    mergeDuplicateChunks: true
  },
  module: {    
    rules: [
      {
        test: /\.(s[ac]ss)$/i,
        include: path.resolve(ROOT, 'src'),
        use: [
            'style-loader', // Creates `style` nodes from JS strings
            {
            loader: 'css-loader', // Translates CSS into CommonJS
            options: {
                modules: {
                mode: 'local',
                localIdentName: devMode
                    ? '[name]_[local]-[hash:base64:3]'
                    : '[local]-[hash:base64:5]',
                },
            },
            },
            {
            loader: 'sass-loader', // compiles Sass to CSS
            options: {
                implementation: require('sass'),
            },
            },
        ],
      },
      {
        test: /\.css$/,
        include: [path.join(ROOT, 'node_modules')],
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],
      },
      {
        test: /\.m?jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'entry',
                  corejs: 3,
                },
              ],
              '@babel/preset-react',
            ],
            plugins: [['@babel/plugin-proposal-class-properties', {loose: true}]],
          },
        },
      },
    ],
  },
  resolve: {
    extensions: [ ... ],
    alias: {
      ...
    },
    modules: [
      ...
    ]
  },
  devtool: 'inline-source-map',
  devServer: {
    port: 3003,
    contentBase: '[pathTo]/dist',
    host: '0.0.0.0',
    hot: true,
    compress: true,
    disableHostCheck: true,
    historyApiFallback: true,
    overlay: { warnings: true, errors: true },
    stats: { ... }
  }
}

我正在使用：

• 网页5.7.0
• webpack cli 4.2.0
• 反应16.13
• 节点14.15.1
• npm 6.14.8

我使用以下命令启动webpack:webpackserve--host 0.0.0.0--config/webpack.dev.js

---

我做错了什么？谢谢你的帮助。：）

我相信当您将它与

webpack

5和

browslist

一起使用时，它是

webpack dev server

v3中的一个bug。您可以等待

webpack dev server

v4，它很快就会到来，或者在

development

模式下暂时使用

target:“web”

。

您有浏览器列表吗？“浏览器列表”：{“生产”：[“>0.2%”，“没有死”，“没有操作”]，“开发”：[“上一个chrome版本”，“last 1 firefox version”，“last 1 safari version”]}，我正在使用Chrome 86.0更改为“default”不会改变行为。目标：“web”帮助。thx m8.：）v4测试版出炉了