组件未使用 react hot loader 重新加载

Question

https://github.com/James2516/hot-reload

我正在尝试将hot loader 添加到现有的 webpack 项目中。

它检测到文件更改但没有重新加载组件。

复制：

1. yarn && yarn start
2. 更改src/App.js内容

Answer 1

这些示例取自 https://gaearon.github.io/react-hot-loader/getstarted/#step-2-of-3-using-hmr-to-replace-the-root-component，尽管您似乎已经遵循了本指南。

第一个问题是[HMR] Waiting for update signal from WDS... 被打印到控制台两次，任何尝试的重新编译也会发生两次。这是由于您在./config/webpack/Dev.js 中的entry 是：

entry: [
  'webpack-dev-server/client?http://localhost:4545/',
  'webpack/hot/only-dev-server',
  'react-hot-loader/patch',
  './client.js',
]

指南的前几个步骤的入口点为：

[
  'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
  'webpack/hot/only-dev-server', // 'only' prevents reload on syntax errors
  './scripts/index' // Your app's entry point
]

Step 3a Step 3 (of 3): 添加 React Hot Loader 以保留组件状态 指示您修改 webpack.config.js 的 entry 看起来像：

[
  'react-hot-loader/patch', // RHL patch
  './scripts/index' // Your app's entry point
]

react-hot-loader 处理这两个条目之前所做的事情，因此可以将它们替换为 'react-hot-loader/patch'。

所以你的新入口点应该是：

[
  'react-hot-loader/patch',
  './client.js'
]

接下来，同一部分中的Step 3b有一个代码sn-p，如下所示：

if (module.hot) {
  module.hot.accept('./containers/rootContainer.js', () => {
    const NextRootContainer = require('./containers/rootContainer').default;
    render(NextRootContainer);
  });
}

将您的 module.hot 块更改为：

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

正确地重新加载组件，因此遵循 步骤 3c 会破坏 HMR。

c。 Webpack 2 内置了对 ES2015 模块的支持，您无需在 module.hot.accept 中重新要求您的应用根目录。上面的例子变成：

if (module.hot) {
  module.hot.accept('./containers/rootContainer', () => { 
   render(RootContainer) });
}

注意：要完成这项工作，您需要通过将 Babel ES2015 预设更改为来选择退出 Babel 转译 ES2015 模块

"presets": [["es2015", { "modules": false }]]

你在.babelrc 中做对了。唯一的问题是在./config/webpack/Base.js 你有：

loader: 'babel-loader',
query: {
  presets: ['es2015', 'react', 'stage-2']
}

这会导致babel-loader 使用这些预设而不是.babelrc 中定义的预设。删除此规则中的query 并将.babelrc 中的presets 更改为：

"presets": [["es2015", { "modules": false }], "react", "stage-2"

使用module.hot 块正确启用 HMR：

if (module.hot) {
  module.hot.accept('./App', () => { render(App); });
}