Webpack vs webpack-dev-server vs webpack-dev-中间件vs webpack-hot-middleware vs etc

Question

我开始工作与webpack与节点/Express环境开发一个ReactJS服务器端渲染应用程序与react-router。我对每个webpack包在dev和prod（运行时）环境中的作用感到非常困惑。

以下是我理解的总结：

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

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

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

当使用webpack-dev-server与节点/Express一起使用时，一个常见的问题是webpack-dev-server和节点/Express一样是服务器。这使得这个环境很难同时运行客户端和一些节点/表达式代码（API等）。）。注意：这是我所面临的，但如果能理解为什么会发生更多细节，那就太好了...

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

webpack-hot-middleware：这个...困在这里...在寻找webpack-dev-middleware时发现了这一块...不知道如何使用它。

Answer 1

截至2018年更新，并考虑到其官方GitHub页面上的webpack开发服务器注释：

维护中的项目请注意，webpack dev server目前处于仅维护模式，短期内不会接受任何其他功能。大多数新的特性请求都可以通过Express中间件完成；请查看文档中使用前后挂钩的情况。

构建网页包HMR的自然选择是什么？

Answer 2

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

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

相比之下，您可以在生产中使用类似于express.static的东西来代替这个中间件。

Webpack Dev Server本身就是一个express Server，它使用Webpack Dev中间件为最新的捆绑包提供服务，并另外处理客户端中实时模块更新的热模块更换（HMR）请求。

Webpack Hot Middleware是webpack-dev-server的替代方案，但它不启动服务器本身，而是允许您将其挂载在现有/自定义快速服务器中，旁边是webpack-dev-middleware。

而且

更让人困惑的是，还有Webpack Hot Server Middleware，它被设计为与Webpack dev Middleware和Webpack Hot Middleware一起使用，以处理服务器呈现应用程序的热模块替换。