实时重新加载 React Express 应用程序

Question

我正在开发一个带有 nodejs(express) 后端的反应应用程序。

我的问题是关于在 react 前端进行更改后创建新的 webpack 包并重新加载浏览器的最佳方法。我正在考虑类似于 nodejs 中的 nodemon 的东西。

我尝试使用 webpack-dev-server 来创建一个新包，每次我在 react 中更改某些内容但遇到错误。

是否可以：

1. 设置 webpack 以在我每次在 react 中更改某些内容时生成一个新包，同时仍使用 nodejs 后端？
2. 设置 webpack 以在我每次更改 react + 重新加载浏览器 + 使用 nodemon 时生成一个新包？
3. 如果不是，如果我想在每次我的 react 应用更改时创建一个新的 webpack 包，该怎么办？

Answer 1

您应该使用热模块更换：https://webpack.js.org/guides/hot-module-replacement/

Answer 2

React 为您提供了一个应用程序构建器，它支持您想要的那些要求。

请看这里。 Create a New React App

创建应用后，稍后在依赖树中添加 webpack。

Answer 3

实际上我自己解决了我的问题。

1. 我的目标是让我的 nodejs(express) 服务器在客户端运行我的 react 应用程序。
2. 此外，webpack 应该在发生变化时创建一个新的包，这样当我重新加载浏览器时，变化就会出现。

要实现这一点，您必须执行两个命令：

1. 在发生变化时构建 webpack 包：

webpack --mode development --watch

1. 还有 nodejs 服务器与 nodemon 在有变化时重新加载：

nodemon src/bin/www