如何使用 Webpack 5 运行热重载 (HMR)？

Question

我正在尝试让 HMR 与 webpack v5 一起运行，但它不起作用。当我修改并保存文件时，webpack 重新编译正确的项目，但前端没有更新。

我阅读了这篇文章并按照说明操作：https://webpack.js.org/guides/hot-module-replacement/

这是我的 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: { ... }
  }
}

我正在使用：

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

我用这个命令启动 webpack：webpack serve --host 0.0.0.0 --config config/webpack.dev.js

我做错了什么？谢谢你的帮助。 :)

Answer 1

当您将它与webpack 5 和browserslist 一起使用时，我认为这是webpack-dev-server v3 https://github.com/webpack/webpack-dev-server/issues/2758 中的一个错误。您可以等待webpack-dev-server v4 https://github.com/webpack/webpack-dev-server/pull/2592#issuecomment-734400875，它很快就会到来，或者在您的development模式下使用target: 'web'。