0

可能这是成千上万个类似问题之一，但我仍然没有看到任何关于如何让 HMR真正发挥作用的答案。

我做了所有这些操作，在文档和你可以在互联网上找到的每个答案中都有描述：

  • 启用 webpack-dev-server 的“热”选项
  • 添加webpack-dev-server/client?{host:port}和webpack/hot/only-dev-server入口点
  • 添加new webpack.HotModuleReplacementPlugin()到插件（以及 NamedModulesPlugin 也是）
  • react-hot-loader文档中的每一步

而现在我所拥有的。

假设我的应用程序如下所示：

<ReactRouter>
  <App>
    <AppRouter />
  </App>
</ReactRouter>

哪里AppRouter像

<Switch>
  <Route path="..." component={Page} />
  ...
</Switch>

并且Page只是<div>some text<div>。

根据文档，在 App 模块中我这样做：

import { hot } from "react-hot-loader"
export default hot(module)(App)

然后尝试将Page组件中的文本修改为“新文本”。

在控制台中，我看到确实启用了 HMR：

[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./Page.js
[HMR]  - ./AppRouter.js
[HMR]  - ./App.js
[HMR] App is up to date.

屏幕上的文字确实会更新为“新文字”。到目前为止，一切都很好。

然后我再次将文本更新为“新文本 2”，然后看到：

Ignored an update to unaccepted module ./Page.js -> ./AppRouter.js -> ./App.js
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
[HMR]  - ./Page.js

文档中对此一无所知。react-hot-loader

但是好的，也许那个文档有点不正确。毕竟，webpack 自己的文档明确表明我们应该module.hot.accept(...)在我们的代码中做。

所以在App.js我做：

if (module.hot) {
  module.hot.accept("./AppRouter", () => {
    console.log("It works!")
  })
}

然后刷新页面，并尝试Page再次修改组件。

现在控制台说：

[WDS] App hot update...
[HMR] Checking for updates on the server...
App.js:20 It works!
[HMR] Updated modules:
[HMR]  - ./Page.js
[HMR]  - ./AppRouter.js
[HMR]  - ./App.js
[HMR] App is up to date.

但是浏览器中的文本没有更新。即，HMR 已启用但不执行任何操作。

成功更新说：

[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./Page.js
[HMR] App is up to date.

所以至少我们修复了之前的错误unaccepted changes——但浏览器中仍然没有任何变化。

我尝试module.hot.accept(...)在 App 装饰时hot(module)和未装饰时都这样做 - 结果是一样的。

还有……接下来呢？我做了我在官方文档中可以找到的一切，但没有任何效果。我究竟做错了什么？

（请不要问“在我们交谈之前提供您的完整 webpack 配置”。这都是默认的，根据 webpack 文档中的示例。不要浪费我们的时间）

4

1 回答 1

0

当您接受一个文件时，您必须自己做这些事情（例如交换组件）。所以做某事。像这样：

if (module.hot) {
  module.hot.accept("./AppRouter", () => {
    const NewAppRouter = require('./AppRouter').default;
    const newApp = (
       <ReactRouter>
          <App>
             <NewAppRouter />
          </App>
       </ReactRouter>
    );
    ReactDom.render(newApp, container);
  });
}

当文件更改时，我会在此处收到通知。然后我需要更改的文件并使用新文件重新渲染我的应用程序。当你使用像 redux 或 mobx 这样的状态管理库时，这种方法效果最好，因为当你重新渲染你的应用程序时，你的应用程序的状态不会改变。

于 2018-04-12T20:54:05.500 回答