Webpack与webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware等的区别

Question

我正在使用webpack在node/express环境下开发一个ReactJS服务器端渲染应用程序，并使用react-router。我对每个webpack包在开发和生产（运行时）环境中的角色感到非常困惑。

以下是我的理解总结： webpack：是一个工具，将Web应用程序的不同部分合并在一起并打包在单个`.js`文件（通常是）。结果文件在生产环境中提供加载应用程序所需的所有组件运行代码的功能，包括缩小代码、最小化等。 webpack-dev-server：它是一个提供服务器来处理网站文件的工具。它还从客户端组件构建一个单独的`.js`文件（bundle.js），但仅在内存中提供服务。它还有选项(-hot)，可以监视所有构建文件，并在代码更改时在内存中构建新的bundle。该服务器直接在浏览器中提供(例如：http:/localhost:8080/webpack-dev-server/whatever)。内存加载、热处理和浏览器提供的组合使用户在代码更改时可以在浏览器上获得更新的应用程序，这是开发环境中的理想情况。 webpack-dev-server与node/express一起使用时常见的问题是webpack-dev-server是一个服务器，而node/express也是一个服务器。这使得此环境难以同时运行客户端和一些node/express代码（如API等）。 webpack-dev-middleware：这是一个中间件，具有与webpack-dev-server相同的功能（内存捆绑、热重新加载），但以可以注入到server/express应用程序的格式。这样，您就有了一个类似于服务器的东西（webpack-dev-server）在节点服务器内部。通过这种方式，可以在不启动另一个服务器的情况下实现静态资源的快速开发和构建。 webpack-hot-middleware: 它可以让你在运行过程中修改模块，而不需要刷新整个页面。

注：如果方便，请添加更多的软件包或数据以构建整个场景。

- Mendes

---

这里列出的所有软件包都不会在生产服务器上使用，它们只是开发人员工具。如果您想编写自己的自定义开发服务器，可以使用 webpack-dev-middleware（以及可能的 webpack-hot-middleware）。除非有特定功能需要使用 webpack-dev-server 没有的，否则应该直接使用它。 - Joe Clay

Answer 1

webpack

正如您所描述的，Webpack是一个模块捆绑器，它主要捆绑各种模块格式，以便在浏览器中运行。它提供了CLI和Node API。

webpack-dev-middleware

Webpack Dev Middleware是一个中间件，可以挂载在express服务器上，在开发过程中服务于您的最新编译的捆绑包。它使用webpack的Node API处于watch mode，并且不会将输出写入文件系统，而是输出到内存。

为了比较，你可以在生产中使用express.static这样的东西代替这个中间件。

webpack-dev-server

Webpack Dev Server本身是一个express 服务器，它使用webpack-dev-middleware来提供最新的打包文件，并且还处理客户端的热模块替换（HMR）请求。

webpack-hot-middleware

Webpack Hot Middleware是webpack-dev-server的替代品，但它不像webpack-dev-server一样启动自己的服务器，而是允许你将其挂载在现有/自定义的express服务器上，与webpack-dev-middleware一起使用。

还有...

webpack-hot-server-middleware

令人更加困惑的是，还有Webpack热服务器中间件，它旨在与webpack-dev-middleware和webpack-hot-middleware一起使用，以处理服务器渲染应用程序的热模块替换。

- Richard Scarrott

---

对于那些寻找前端与后端热模块替换差异的人，请查看此帖子：https://dev59.com/nVYO5IYBdhLWcg3wRfd- Xlee很好地解释了每个方面的要求--服务器端需要重新启动，前端允许加载更新的JavaScript包。 - abelito

Answer 2

截至2018年更新，考虑到 官方GitHub页面上的webpack-dev-server公告：

项目维护中请注意，webpack-dev-server目前处于仅维护模式，并且在短期内不会接受任何其他功能。大多数新功能请求可通过Express中间件实现；请查看文档中的before和after钩子。

对于构建webpack HMR来说，什么是自然的选择？

- Mendes

---

它还说：“使用webpack-serve作为快速替代方案。如果您需要在旧浏览器上进行测试，请使用webpack-dev-server。”因此，您可能想尝试webpack-serve。 - Bruce Sun

维护说明已被移除，所以我猜它又被推荐使用了？真让人气愤，一个如此重要的开发工具周围却有如此糟糕的维护团队。 - Alma Alma

webpack-serve已经被弃用了，正如@CaptainFogetti所说，从今天开始，webpack-dev-server的维护提示已被删除。 - Anoop D

webpack-dev-server是用于开发构建的官方webpack服务器。您可以在https://webpack.js.org/configuration/dev-server/#devserver中找到详细文档，甚至还具有通过配置支持webpack-dev-middleware和http-proxy-middleware的内置功能。除非您有一个非常复杂的设置，否则我建议使用此服务器。在这种情况下，您可以选择使用webpack-dev-middleware。 - Joe Seifi