无恶魔和/或热重载与节点反应Web应用程序

Question

在使用webpack配置Web应用程序以创建最佳开发体验方面，我仍然是个新手。我已经学习了两门不同的Node-React课程：一门我们使用nodemal跟踪更改，另一门我们实现热重载。

当涉及到这两个依赖项时，是一个依赖项还是另一个依赖项？它们应该一起使用，还是有点多余？

另外，如果我在客户端使用带有React的express服务器，我是使用React热加载程序、webpack热中间件还是两者都使用？我对热重新加载采用哪种方法感到困惑，因为似乎有很多方法可以做到这一点。

另外，当我使用nodemon作为包装器（nodemon--exec babel node server.js）时，我的热模块重新加载不起作用，但我仍然发现自己缺少一种轻松重启服务器的方法。

非常感谢。

Answer 1

除了这些花哨的术语，它们基本上都在做同样的事情——“关注（监视）您的本地编辑（文件系统更改）并为您更新应用程序”，因此它们都是旨在促进/加速您的开发过程的开发工具。（不用于生产）

Nodemon负责您的服务器端（Express），而Webpack（观看模式）负责客户端（React）。

如果没有太多的魔法，Nodemon只需在文件更改时重新启动/重新加载express服务器，否则您需要终止

然而，Webpack（启用了监视模式，通常是在开发周期中）有点复杂，它监视客户端代码的更改，但是在

1. 热模块更换-在不完全重新加载的情况下重新编译更改的模块
2. webpack开发中间件-通过连接的服务器提供结果

重新编译过程非常快，可以通过以下任一方式从本地dev服务器提供服务：

• webpack开发服务器服务更改的模块和实时重装（连接到浏览器和硬刷新页面）
• webpack-dev-middleware Express/Koa服务器，可以做同样的事情，但是你可以获得更多的控制，比如服务静态文件或创建一些api路由。

尽管实时重新加载很酷，但由于页面的硬刷新会导致应用程序失去所有客户端状态（破坏许多开发工具，例如redux开发工具），因此react hot loader在这种情况下起到了解救作用。

通常，基于您的Express React应用程序，我会为Express设置Nodemon。对于React，如果您想要一个独立的开发服务器开箱即用，请选择webpack dev serverReact hot loader，或者您想要在现有Express服务器上集成开发服务器并进行少量定制，请改用webpack dev中间件 。（无论如何，HMR都需要添加为网页包插件）