React Hot Reloading + Webpack 没有 Express 或 Webpack-Dev-Server

Posted 2023-02-21

【中文标题】React Hot Reloading + Webpack 没有 Express 或 Webpack-Dev-Server

【英文标题】：React Hot Reloading + Webpack without Express or Webpack-Dev-Server

【发布时间】：2020-02-18 09:02:15

【问题描述】：

我有一个带有 React+Redux 应用程序的客户端-服务器架构，它使用 Webpack 将代码捆绑到一个 dist 文件夹中，以及一个为这些文件提供服务的 go 服务器，我正在尝试在这个配置中实现 react-hot-reloading . 客户端通过 API 调用和 web-socket 与 go 服务器进行通信。

我看到的所有示例和指南都在谈论 Express 或 Webpack-Dev-Server 服务器作为实现热重载的先决条件，例如： https://www.javascriptstuff.com/webpack-hmr-tutorial/

https://thoughtbot.com/blog/setting-up-webpack-for-react-and-hot-module-replacement

有没有办法在这种配置中实现热重载？我能想到的唯一解决方案是在开发过程中使用 Express 或 Webpack-Dev-Server 服务器，并将 API 调用和 web-socket 重定向到服务器，但这似乎有点矫枉过正。

【参考方案1】：

与这些问题相关的常见陷阱有两个： 1. 在生产环境中运行 webpack-dev-server。 2. 从一台服务器下载 React 脚本包，然后包中的代码尝试调用另一台服务器 API 时出现 CORS 安全违规。

如果客户端从 Express 获取所有内容，包括脚本包和 API 响应，那么 CORS 就没有空间了。

为了方便开发中的热重载，Express 应该从 webpack-dev-server 获取捆绑包，然后将其提供给客户端。这不是矫枉过正，它应该是一种可以节省大量开发时间的规范。最后，在生产环境中，Express 应该从磁盘获取捆绑包。

【讨论】：

是的，有一个工作示例：Crisp React。这是一个样板，我是作者。它是用 Typescript 编写的，有 NodeJS/Express 后端，没有 Go 服务器。目标之一是在所有开发阶段为客户端和后端保持热重载。虽然纯粹主义者可以说 HR 作为一个术语仅适用于客户端代码。

P.S.我输入了“Hot Reloading”，但意思是“Live Reloading”。