在 webpack 中为 HMR 配置 babel-loader 的正确方法答案

【问题标题】：Correct way to configure babel-loader in webpack for HMR在 webpack 中为 HMR 配置 babel-loader 的正确方法
【发布时间】：2017-12-19 18:19:11
【问题描述】：

大约一周前，我在将 HMR 添加到我的项目时遇到了一个问题，问题是它无法正常工作，控制台显示 HMR 已启用，并且还检测到文件的更改，但它没有重新 -渲染视图，控制台会记录：

[HMR] Updated modules:
[HMR]  - ./app/src/components/app.jsx
[HMR] App is up to date.

但是在视觉上什么都不会改变，在代码检查器中也是如此。

经过大量试验，我发现问题是由 babel-loader 引起的，它以某种方式干扰了 webpacks HMR 电机或类似的东西。我通过排除 babel 加载器中的索引文件来解决它，但是我认为这不是最好的方法，因为现在我不能在我的 index.jsx 文件中使用一些 js 功能。我想知道是否有更好的方法来解决这个问题，可能是我的配置或设置 webpacks 热中间件的方式。

这是我的 webpack 配置：

module.exports = {
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  entry: [
    'webpack-hot-middleware/client', './app/src/index.jsx'
  ],
  output: {
    path: path.resolve(__dirname, 'build/js'),
    filename: 'bundle.js',
    publicPath: '/public'
  },
  devtool: 'cheap-module-source-map',
  module: {
    rules: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      include: path.resolve(__dirname, 'app/src/'),
      exclude: path.resolve(__dirname, 'app/src/index.jsx'),
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            'react-hmre'
          ],
          plugins: [
            'transform-object-rest-spread'
          ]
        }
      }],
    }]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}

这就是我在服务器中设置热中间件和 react-hot-loader 的方式：

const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const webpackHotMiddleware = require('webpack-hot-middleware')

const webpackConfig = require('./webpack.dev.config')
const compiler = webpack(webpackConfig)

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath
}))

app.use(webpackHotMiddleware(compiler))

提前致谢。

【问题讨论】：

标签： javascript reactjs webpack babel-loader webpack-hot-middleware

【解决方案1】：

所以这是我想的 babel 配置，你需要在 env 预设中选择 modules: false 以便让 webpack 处理模块，这是一个新手错误，但是伙计，它让我疯狂了好几天。

环境预设的正确配置如下：

['env', {modules: false}]

【讨论】：