Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc

Question

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

以下是我的理解总结：

webpack：是一个包，是一种将 Web 应用程序的不同部分连接在一起并捆绑在一个 .js 文件中的工具（通常是 bundle.js）。然后将结果文件提供给应用程序加载的 prod 环境，并包含运行代码所需的所有组件。功能包括收缩代码、缩小等。

webpack-dev-server：是一个提供服务器来处理网站文件的包。它还从客户端组件构建单个 .js 文件 (bundle.js)，但在内存中提供它。它还可以选择 (-hot) 来监视所有构建文件并在内存中构建一个新包以防代码更改。服务器直接在浏览器中提供服务（例如：http:/localhost:8080/webpack-dev-server/whatever）。内存加载、热处理和浏览器服务的结合让用户可以在代码更改时在浏览器上更新应用程序，非常适合开发环境。

如果我对上面的文字有疑问，下面的内容我真的不确定，所以如果有需要请指教

将webpack-dev-server 与node/express 一起使用时的一个常见问题是webpack-dev-server 和node/express 一样是服务器。这使得这个环境很难同时运行客户端和一些节点/快速代码（API 等）。 注意：这是我所面临的，但如果能更详细地了解为什么会发生这种情况，我会很高兴...

webpack-dev-middleware：这是一个与webpack-dev-server 功能相同的中间件（内存捆绑，热重载），但格式可以注入server/express 应用程序。这样，您在节点服务器内部就有了一种服务器（webpack-dev-server）。 哎呀：这是个疯狂的梦吗？？？这篇文章如何解决开发和生产方程并让生活更简单

webpack-hot-middleware：这... /p>

尾注：对不起，有任何错误的想法。我真的需要帮助才能在复杂的环境中理解这些变体。如果方便，请添加更多的包/数据来构建整个场景。

Answer 1

webpack

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

webpack-dev-middleware

Webpack 开发中间件是可以安装在快速服务器中的中间件，以在开发期间为您的包的最新编译提供服务。这在watch mode 中使用webpack 的Node API，而不是将其输出到文件系统outputs to memory。

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

webpack-dev-server

Webpack 开发服务器本身就是一个快速的服务器，它使用webpack-dev-middleware 来提供最新的捆绑包，并额外处理客户端中实时模块更新的热模块替换 (HMR) 请求。

webpack-hot-middleware

Webpack Hot Middleware 是 webpack-dev-server 的替代品，但它无需启动服务器本身，它允许您将其安装在现有的/自定义 express 服务器中，与 webpack-dev-middleware 并排。

还有……

webpack-hot-server-middleware

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

Answer 2

截至 2018 年更新，并考虑到 its official GitHub page:

上的 webpack-dev-server 注释

维护中的项目请注意 webpack-dev-server 是 目前处于仅维护模式，不会接受任何 近期内的附加功能。大多数新功能请求可以是 使用 Express 中间件完成；请考虑使用 文档中的 before 和 after 挂钩。

构建 webpack HMR 的自然选择是什么？