Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc
Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-middleware vs etc
我开始使用 webpack 和 node/express 环境开发 ReactJS 服务器端呈现的应用程序 react-router。我对每个 webpack 包在开发和生产（运行time）环境中的作用感到非常困惑。
以下是我的理解总结：
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 也是。这使得这个环境对于 运行 客户端和一些 node/express 代码（API 等）来说都很棘手。 注意：这是我遇到的问题，但如果能更详细地了解为什么会发生这种情况，我会很高兴...
webpack-dev-middleware：这是一个中间件，具有与webpack-dev-server相同的功能（内存绑定，热重载），但格式可以注入server/express应用程序。这样，您在节点服务器内部就有了一种服务器（webpack-dev-server）。 糟糕：这是一个疯狂的梦想吗？？？这篇文章如何解决开发和生产方程式并使生活更简单
webpack-hot-middleware：这个... 卡在这里...在寻找webpack-dev-middleware时找到了这个...不知道如何使用它.
ENDNOTE：抱歉有什么想法不对。我真的需要帮助才能在复杂的环境中理解这些变体。如果方便，请添加更多 packages/data 来构建整个场景。
webpack
正如您所描述的，Webpack 是一个模块捆绑器，它主要捆绑各种模块格式，以便它们可以 运行 在浏览器中。它同时提供 CLI and Node API.
webpack-dev-middleware
Webpack Dev Middleware 是可以安装在快速服务器中的中间件，用于在开发期间为您的包提供 最新编译。这在 watch mode and instead of outputting to the file system it outputs to memory.
中使用 webpack 的节点 API
For comparison, you might use something like express.static instead of this middleware in production.
webpack-dev-server
Webpack Dev Server 本身就是一个 express server，它使用 webpack-dev-middleware 来提供最新的 bundle 并另外处理实时模块更新的热模块替换 (HMR) 请求客户。
webpack-hot-middleware
Webpack Hot Middleware 是 webpack-dev-server 的替代品，但它不是启动服务器本身，而是允许您将其安装在 webpack-dev-middleware.
旁边的现有/自定义 express 服务器中
还有...
webpack-hot-server-middleware
只是为了让事情更加混乱，还有 Webpack 热服务器中间件，它被设计用来与 webpack-dev-middleware 和 webpack-hot-middleware 一起使用来处理服务器渲染应用程序的热模块替换。
截至 2018 年更新并考虑 webpack-dev-server 关于 its official GitHub page:
的注释
Project in Maintenance Please note that webpack-dev-server is
presently in a maintenance-only mode and will not be accepting any
additional features in the near term. Most new feature requests can be
accomplished with Express middleware; please look into using the
before and after hooks in the documentation.
构建 webpack HMR 的自然选择是什么？
我开始使用 webpack 和 node/express 环境开发 ReactJS 服务器端呈现的应用程序 react-router。我对每个 webpack 包在开发和生产（运行time）环境中的作用感到非常困惑。
以下是我的理解总结：
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 也是。这使得这个环境对于 运行 客户端和一些 node/express 代码（API 等）来说都很棘手。 注意：这是我遇到的问题，但如果能更详细地了解为什么会发生这种情况，我会很高兴...
webpack-dev-middleware：这是一个中间件，具有与webpack-dev-server相同的功能（内存绑定，热重载），但格式可以注入server/express应用程序。这样，您在节点服务器内部就有了一种服务器（webpack-dev-server）。 糟糕：这是一个疯狂的梦想吗？？？这篇文章如何解决开发和生产方程式并使生活更简单
webpack-hot-middleware：这个... 卡在这里...在寻找webpack-dev-middleware时找到了这个...不知道如何使用它.
ENDNOTE：抱歉有什么想法不对。我真的需要帮助才能在复杂的环境中理解这些变体。如果方便，请添加更多 packages/data 来构建整个场景。
webpack
正如您所描述的，Webpack 是一个模块捆绑器，它主要捆绑各种模块格式，以便它们可以 运行 在浏览器中。它同时提供 CLI and Node API.
webpack-dev-middleware
Webpack Dev Middleware 是可以安装在快速服务器中的中间件，用于在开发期间为您的包提供 最新编译。这在 watch mode and instead of outputting to the file system it outputs to memory.
中使用webpack 的节点 API
For comparison, you might use something like
express.staticinstead of this middleware in production.
webpack-dev-server
Webpack Dev Server 本身就是一个 express server，它使用 webpack-dev-middleware 来提供最新的 bundle 并另外处理实时模块更新的热模块替换 (HMR) 请求客户。
webpack-hot-middleware
Webpack Hot Middleware 是 webpack-dev-server 的替代品，但它不是启动服务器本身，而是允许您将其安装在 webpack-dev-middleware.
还有...
webpack-hot-server-middleware
只是为了让事情更加混乱，还有 Webpack 热服务器中间件，它被设计用来与 webpack-dev-middleware 和 webpack-hot-middleware 一起使用来处理服务器渲染应用程序的热模块替换。
截至 2018 年更新并考虑 webpack-dev-server 关于 its official GitHub page:
的注释Project in Maintenance Please note that webpack-dev-server is presently in a maintenance-only mode and will not be accepting any additional features in the near term. Most new feature requests can be accomplished with Express middleware; please look into using the before and after hooks in the documentation.
构建 webpack HMR 的自然选择是什么？