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

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

这是我的理解摘要：

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

webpack-dev-server：是一个提供服务器以处理网站文件的软件包。它还bundle.js从客户端组件构建单个.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在节点服务器内部拥有某种服务器（）。 糟糕：这是一个疯狂的梦想吗？？？这一部分如何解决dev和prod方程并使生活更简单

webpack-hot-middleware：这... 卡在这里...在寻找时发现了这件作品webpack-dev-middleware...不知道如何使用它。

ENDNOTE：对不起，有什么错误的想法。我真的需要帮助，以便在复杂的环境中理解这些变体。如果方便，请添加更多可构成整个方案的软件包/数据。

webpack

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

webpack-dev-middleware

Webpack Dev Middleware是中间件，可以将其安装在快速服务器中，以在开发过程中为您的软件包提供最新的编译。它webpack在监视模式下使用Node API，而不是输出到文件系统，而是输出到内存。

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

webpack-dev-server

Webpack Dev Server本身是一个快速服务器，用于webpack-dev-middleware提供最新的捆绑软件，并另外处理客户端中实时模块更新的热模块替换（HMR）请求。

webpack-hot-middleware

Webpack Hot Middleware可以替代Webpack Hot Middleware，webpack-dev-server而不是启动服务器本身，它使您可以将其安装在现有的/自定义的Express服务器中webpack-dev-middleware。

也...

webpack-hot-server-middleware

只是为了使事情更加混乱，还有Webpack Hot Server Middleware，该软件旨在与服务器渲染的应用程序一起使用webpack-dev-middleware并webpack-hot-middleware处理服务器的热模块替换。

从2018年更新开始，并考虑其官方GitHub页面上的webpack-dev-server注意事项：

维护中的项目请注意，webpack-dev-server当前处于仅维护模式，并且在短期内将不接受任何其他功能。大多数新功能请求都可以通过Express中间件完成。请研究使用文档中的before和after挂钩。

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