如果我使用类似于express的node服务器，是否需要webpack-dev-server？

Question

我正在跟随一些教程使用express和react构建一个同构应用程序。 我对webpack-dev-server感到困惑。

webpack的教程中提到了webpack-dev-server:

它会在localhost:8080上绑定一个小型express服务器，它不仅会服务于您的静态资源，还会服务于您的打包文件（自动编译）。

当打包文件被重新编译时，它会自动更新浏览器页面（使用socket.io）。在浏览器中打开http://localhost:8080/webpack-dev-server/bundle。

由于我使用了express服务器，那么我真的需要webpack-dev-server吗？或者使用它有什么优点和缺点？如果我想使用react-hot-loader，那是否需要webpack-dev-server？

- Brick Yang

Answer 1

自己搭建的express服务器是否真的需要webpack-dev-server呢？答案是肯定或否定。您可以使用混合方法，将webpack-dev-server设置为代理。您拥有自己的express服务器，它提供除资产以外的所有内容。如果请求是资产，则将其转发/代理到webpack-dev-server。有关详细信息，请参见此处的答案：如何允许webpack-dev-server从react-router中允许入口点。或者，如果您不想处理所有混乱的代理逻辑并且运行2个服务器，您可以改用webpack-dev-middleware和webpack-hot-middleware。请参见此处的示例：https://github.com/glenjamin/webpack-hot-middleware/blob/master/example/server.js。使用它的优缺点是什么？

实时重新加载和热模块替换。在我看来，这是非常有用的开发功能。

如果我想使用react-hot-loader，webpack-dev-server是必需的吗？

不，它是在Webpack的热模块替换接口之上工作的。如果需要，您可以创建自己的“热服务器”。webpack-dev-server客户端只需监听socket.io以获取热更新并调用postMessage (https://github.com/webpack/webpack-dev-server/blob/8e8f540b2f7b35f7b6c3ce616a7fd2215aaa6eea/client/index.js#L64-L67)，然后由服务器 https://github.com/webpack/webpack/blob/bac9b48bfb0f7dd9732f2faafb43ebb22ee2a2a7/hot/only-dev-server.js#L59-L67 捕获。

我建议您使用我上面提到的webpack-dev-middleware和webpack-hot-middleware。这样，您就不必担心代理逻辑，可以轻松地将热重载集成到现有的express服务器中，而无需使用webpack-dev-server。

- trekforever

---

谢谢！那我能说使用react-hot-loader的最佳实践是使用您提到的中间件吗？如果考虑生产环境呢？我认为在那种情况下不需要实时重新加载，对吗？那么我应该删除中间件代码吗？ - Brick Yang

react-hot-loader 正在被弃用，所以我建议您查看 https://github.com/gaearon/react-transform-hmr（它是由同一位作者开发的）。是的，您不需要在生产环境中进行实时重新加载，因此在您的 server.js 文件中，我建议您有条件地检查环境。如果是开发环境，请使用中间件。否则，可以跳过该步骤。 - trekforever

谢谢您提供详细的答案！一旦您完成这些步骤，您在生产环境中会做什么？ - Madara's Ghost

@BrickYang 我在Phusion Passenger上运行Rails v3和Rails v4的应用程序（在生产环境中）。如果我在我的开发计算机（Ubuntu）上构建一个Rails 5.1应用程序，并使用Webpack，为什么“localhost”无法提供资产？为什么需要webpack-dev-server？ - Chris

@Chris 我不熟悉Rails，但我现在使用webpack-dev-server。在开发环境中，您不需要将任何文件构建到磁盘上，因此在本地主机上没有这样的文件可以提供服务。webpack-dev-server会在内存中生成和提供文件。在部署应用程序之前，您需要运行一次webpack以将真实文件构建到磁盘上，以供生产环境使用。 - Brick Yang