Electron、React 和 Webpack，如何让 HMR 工作？答案

【问题标题】：Electron, React and Webpack, how to make HMR work?Electron、React 和 Webpack，如何让 HMR 工作？
【发布时间】：2023-03-20 08:40:01
【问题描述】：

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

项目的创建结构如下：

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

不知道如何解决这个问题，react-hot-loader 似乎是用来让它工作的库，但不知道如何使它与 ts-loader 一起工作，谁能指出如何设置这个在职的？谢谢！

编辑 1：我尝试添加 react-hot-reload 但我收到 require is not defined 错误...

【问题讨论】：

标签： javascript reactjs webpack electron

【解决方案1】：

好吧，在摸索react-hot-loader 包之后，我无法让它工作，所以我偶然发现了默认的 webpack 热重载方式：

在索引文件上（您导入根反应组件的位置，您可以使用以下内容：

declare let module: { hot: any };

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

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

至少到目前为止它似乎在工作

【讨论】：