如何使用 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 ，它很快就會到來，或者使用target: 'web'下你的development模式。