107

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

以下是我的理解总结：

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

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

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

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

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

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

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

4

2 回答 2

141

webpack

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

webpack-dev-middleware

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

为了比较，您可能会在生产中使用类似的东西express.static而不是这个中间件。

webpack-dev-server

Webpack Dev Server 本身就是一个快速服务器，用于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处理热模块替换。

于 2017-02-20T21:19:27.863 回答
7

截至 2018 年更新并考虑其官方 GitHub 页面上的webpack-dev-server注释：

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

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

于 2018-03-19T22:37:39.560 回答