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

Question

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

Men*_*des 83 javascript node.js webpack webpack-dev-server webpack-dev-middleware

我开始使用开发服务器端渲染应用程序webpack的node/express环境.我对devpack和prod(运行时)环境中每个webpack包的作用感到非常困惑.ReactJSreact-router

以下是我的理解摘要:

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

webpack-dev-server:是一个提供服务器来处理网站文件的包.它还bundle.js从客户端组件构建单个.js文件(),但在内存中提供.它还具有option(-hot)来监视所有构建文件,并在代码更改的情况下在内存中构建新的bundle.服务器直接在浏览器中提供(例如:)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在节点服务器中使用某种服务器(内部). 哎呀:这是一个疯狂的梦吗??? 这件作品如何解决开发和生产方程,使生活更简单

webpack-hot-middleware:这......被困在这里...找到这件作品时webpack-dev-middleware......不知道如何使用它.

ENDNOTE:对不起,有任何错误的想法.我真的需要帮助才能在复杂的环境中找到这些变体.如果方便的话,请添加更多将构建整个场景的软件包/数据.

Answer 1

ris*_*ott 107

`webpack`

正如您所描述的,Webpack是一个模块捆绑器,它主要捆绑各种模块格式,因此可以在浏览器中运行.它提供CLI和Node API.

`webpack-dev-middleware`

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

相比之下,您可能会express.static在生产中使用类似于此中间件的东西.

对于那些正在寻找前端与后端热模块更换故障的人，请参阅此帖子：/sf/ask/3226040821/ react-web-app Xlee 很好地解释了每一端的要求——服务器端需要重启，前端允许加载更新的 javascript 包。 (2认同)

Answer 2

Men*_*des 9

截至2018年更新并考虑其官方GitHub页面上的webpack-dev-server说明:

维护项目请注意,webpack-dev-server目前处于仅维护模式,短期内不接受任何其他功能.大多数新功能请求都可以使用Express中间件完成; 请查看使用文档中的前后挂钩.

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

它还说`使用 webpack-serve 作为快速替代方案。如果您需要在旧浏览器上进行测试，请使用 webpack-dev-server。` 所以您可能想尝试 [webpack-serve](https://github.com/webpack-contrib/webpack-serve) 。 (2认同)
维护说明已被删除.所以我想再次推荐??? 令人沮丧的是,这样一个重要的开发工具有一个可怕的维护团队围绕它. (2认同)
webpack-serve已被弃用,正如@CaptainFogetti所说,维护说明已于今天从webpack-dev-server中删除 (2认同)
webpack-dev-server 是用于开发版本的官方 webpack 服务器。它在这里有详细记录 https://webpack.js.org/configuration/dev-server/#devserver 甚至通过配置内置了对 webpack-dev-middleware 和 http-proxy-middleware 的支持。我建议使用这个，除非你有一个非常复杂的设置，在这种情况下你会选择 webpack-dev-middleware (2认同)

归档时间：	8 年，8 月前
查看次数：	20284 次
最近记录：	6 年，8 月前

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

`webpack`

`webpack-dev-middleware`

`webpack-dev-server`

`webpack-hot-middleware`

`webpack-hot-server-middleware`