Electron、React 和 Webpack，如何讓 HMR 發揮作用？

Question

很難理解 webpack 的復雜性，我需要一些幫助才能讓 HMR 工作，我已經開始了一個使用電子偽造的新項目，使用 typescript-webpack 模板。

該項目是使用以下結構創建的：

您可以看到 ts-loader 配置已經在那里，之后我添加了 react 和 react-dom 並設置了一個 hello world App 組件，現在的問題是，當我更改該組件時，出現 webpack HMR 錯誤：

不知道如何解決這個問題，react-hot-loader 似乎是讓這個工作的庫，但不確定如何讓它與 ts-loader 一起工作，有人能指出如何讓這個設置工作嗎？ 謝謝！

編輯 1：我嘗試添加 react-hot-reload 但我得到一個require is not defined錯誤......

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"));
  });
}

至少到目前為止它似乎有效