Javascript React Hot Loader似乎可以工作，但无法'；t更新。[巴别塔预设环境]

我试图建立一个最小的项目，利用最新版本的Webpack、React、Babel和React Hot Loader。 我的问题与上面描述的相同。然而，唯一的区别是，我使用的是（除了上面提到的内容之外）

babel-preset-env

而不是

babel-preset-es2015

，因此该修复不适用于我

简而言之：一切正常，React Hot Loader检测到更改，但组件不会重新招标，更改不会应用于网站

（Thread install/Thread start应该开始）您可以通过更改

/components/App.js

中的

testString

并保存文件来重现该行为

我做错了什么

webpack.config.js

var webpack = require('webpack')

module.exports = {
    entry: [
      'react-hot-loader/patch',
      './src/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    },
    module: {
        rules: [
            {
              test: /\.js$/,
              exclude: /(node_modules)/,
              use: {
                loader: 'babel-loader',
              }
            }
          ]
    },
    devServer: {
      contentBase: './dist',
      hot: true
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
      ]

}

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from '../components/App'

const render = Component => {
    ReactDOM.render(
      <AppContainer>
        <Component />
      </AppContainer>,
      document.getElementById('app'),
    )
  }

render(App)

if (module.hot) {
const NextApp = require('../components/App').default
module.hot.accept('../components/App', () => { render(NextApp) })
}

.babelrc

{
    "presets": [
      "react",
      [ "env", {
        "targets": {
          "browsers": "> 10%"
        }
      }]
    ],
    "plugins": ["react-hot-loader/babel"]
  }

{
"presets": [
  "react",
  [ "env", {
    "modules": false,
    "targets": {
      "browsers": "> 10%"
    }
  }]
],
"plugins": ["react-hot-loader/babel"]

index.js

var webpack = require('webpack')

module.exports = {
    entry: [
      'react-hot-loader/patch',
      './src/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    },
    module: {
        rules: [
            {
              test: /\.js$/,
              exclude: /(node_modules)/,
              use: {
                loader: 'babel-loader',
              }
            }
          ]
    },
    devServer: {
      contentBase: './dist',
      hot: true
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
      ]

}

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from '../components/App'

const render = Component => {
    ReactDOM.render(
      <AppContainer>
        <Component />
      </AppContainer>,
      document.getElementById('app'),
    )
  }

render(App)

if (module.hot) {
const NextApp = require('../components/App').default
module.hot.accept('../components/App', () => { render(NextApp) })
}

---

好的，我意识到我只需要为“env”预设设置{“modules”：false}属性，方法与“es2015”预设相同

.babelrc

{
    "presets": [
      "react",
      [ "env", {
        "targets": {
          "browsers": "> 10%"
        }
      }]
    ],
    "plugins": ["react-hot-loader/babel"]
  }

{
"presets": [
  "react",
  [ "env", {
    "modules": false,
    "targets": {
      "browsers": "> 10%"
    }
  }]
],
"plugins": ["react-hot-loader/babel"]

}