Webpack热模组更换+反应

Question

也许这是成千上万个类似的问题之一，但我仍然没有看到任何关于如何使HMR 真正的工作的答案。

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

• 启用webpack开发服务器的“热”选项
• 添加webpack-dev-server/client?{host:port}和webpack/hot/only-dev-server入口点
• 将new webpack.HotModuleReplacementPlugin()添加到插件中(以及NamedModulesPlugin )
• 反应热装载机文档的每一步

现在我所拥有的。

假设我的应用程序是这样的：

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

在那里AppRouter就像

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

而Page只是<div>some text<div>。

因此，对于docs，在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

在文档中，关于这一点，没有任何。

但好吧，也许那个医生有点不对。毕竟，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(...)，无论是当应用程序被hot(module)修饰时，还是当它不是，结果都是一样的。

还有..。接下来是什么？我做了所有我能在官方文件里找到的东西，但都没有用。我做错了什么？

(请不要问：“在我们谈话之前，请提供你全部的webpack配置”。)所有这些都是默认的，因此webpack的文档就是一个例子。不要把我们的时间浪费在这上面)

Answer 1

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

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这样的状态管理库时，这是最好的，因为当您重新修改应用程序时，应用程序的状态不会改变。