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

Question

我开始使用带有 node/express 环境的 webpack 开发一个带有 react- 的 ReactJS 服务器端渲染应用程序路由器。我对每个 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。这使得这个环境很难同时运行客户端和一些 Node/快速代码(API 等)。 注意:这是我所面临的，但如果能更详细地了解为什么会发生这种情况，我会很高兴......

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

webpack-hot-middleware:这个……卡在这里……在寻找 webpack-dev-middleware 时发现了这个片段。 ..不知道如何使用它。

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

Answer 1

webpack

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

webpack-dev-middleware

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

For comparison, you might use something like express.static instead of this middleware in production.

webpack-dev-server

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

webpack-hot-middleware

Webpack Hot Middleware 是 webpack-dev-server 的替代品，但它不是启动服务器本身，它允许您将它安装在现有的/自定义的 express 服务器中，旁边是 webpack-dev-中间件.

还有……

webpack-hot-server-middleware

更令人困惑的是，还有 Webpack Hot Server Middleware，它被设计为与 webpack-dev-middleware 和 webpack-hot-middleware 一起使用来处理服务器渲染应用的热模块替换。