如何在Webpack 5中实现热重载(HMR)?

7
我试图使用webpack v5实现热模块替换(HMR),但它不起作用。当我修改并保存一个文件时,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
  • react 16.13
  • node 14.15.1
  • npm 6.14.8

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

我做错了什么?感谢您的帮助。:)

1个回答

18

1
v4 beta已经发布 https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.0 - Sam Chen

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接