在Webpack中為HMR配置babel-loader的正確方法

Question

大約一周前，我在向項目中添加HMR時遇到問題，問題在於它只是無法正常工作，控制台顯示了HMR Enabled，並且還檢測到文件上的更改，但是沒有重新呈現視圖，控制台將記錄：

[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))

提前致謝。

Answer 1

所以這就是我所想的babel配置，您需要選項modules: false env預設中為modules: false ，以便讓webpack處理這些模塊，這是一個菜鳥的錯誤，但是，伙計，這讓我發瘋了好幾天。

正確的環境預設配置如下：

['env', {modules: false}]