Electron、React和Webpack，如何使HMR工作？

Question

理解webpack的复杂性很困难，我需要一些帮助来使HMR正常工作。我使用electron-forge使用typescript-webpack模板开始了一个新项目。

该项目创建了以下结构：

你可以看到ts-loader配置已经在里面了，之后我添加了react和react-dom，并设置了一个hello world App组件，问题是现在，当我更改该组件时，我会得到一个webpack HMR错误：

我不确定如何解决这个问题，react-hot-loader似乎是一个可以使用的库，但是不确定如何与ts-loader配合使用，有人能指出如何设置吗？谢谢！

编辑1：我尝试添加了react-hot-reload，但是出现了“require未定义”的错误...

- Oscar Franco

Answer 1

好的，经过尝试使用react-hot-loader软件包后我仍然无法使其正常工作，因此我偶然发现了默认的webpack热重载方式：

在索引文件中（导入根React组件的位置），您可以使用以下代码：

declare let module: { hot: any };

if (module.hot) {
  module.hot.accept("./App", () => {
    const NewApp = require("./App").default;

    render(<NewApp />, document.getElementById("app"));
  });
}

至少目前看起来它正在运作。

- Oscar Franco