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

JavaScript Webpack

Jim猿

2020-03-23

我开始在开发使用的服务器端渲染应用程序webpacknode/express环境中工作我对每个Webpack包在开发和生产(运行时)环境中的作用感到非常困惑。ReactJSreact-router

这是我的理解摘要:

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

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

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

当使用一个常见的问题webpack-dev-servernode/expresswebpack-dev-server一个服务器,是node/express这使得该环境很难同时运行客户端和某些节点/表达代码(API等)。注意:这是我所面临的,但是很高兴理解为什么会更详细地发生这种情况...

webpack-dev-middleware:这是一种中间件,具有webpack-dev-server(内存捆绑,热重装)相同的功能,但是其格式可以注入到server/express应用程序中。这样,您就可以webpack-dev-server在节点服务器内部拥有一种服务器()。 糟糕:这是一个疯狂的梦想吗?这一部分如何解决dev和prod方程并使生活更简单

webpack-hot-middleware:这... 卡在这里...在寻找时发现了这件作品webpack-dev-middleware...不知道如何使用它。

ENDNOTE:对不起,有什么错误的想法。我真的需要帮助,以便在复杂的环境中理解这些变体。如果方便,请添加更多构建整个方案的包/数据。

第2763篇《Webpack vs webpack-dev-server vs webpack-dev-middleware vs webpack-hot-Middleware vs etc》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
小小Near 2020.03.23

webpack

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

webpack-dev-middleware

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

为了进行比较,您可以express.static在生产中使用类似这样的替代中间件的东西

webpack-dev-server

Webpack Dev Server本身是一个快速服务器,用于webpack-dev-middleware提供最新的软件包,并另外处理客户端中实时模块更新的热模块替换(HMR)请求。

webpack-hot-middleware

Webpack Hot Middleware可以替代Webpack Hot Middleware,webpack-dev-server而不是启动服务器本身,它使您可以将其安装在现有的/定制的Express服务器中webpack-dev-middleware

也...

webpack-hot-server-middleware

只是为了使事情更加混乱,还有Webpack Hot Server中间件,旨在与服务器渲染的应用程序一起使用webpack-dev-middlewarewebpack-hot-middleware处理服务器的热模块替换。

西门 2020.03.23

从2018年更新开始,并考虑其官方GitHub页面webpack-dev-server注意事项

维护中的项目请注意,webpack-dev-server当前处于仅维护模式,并且在短期内将不接受任何其他功能。大多数新功能请求都可以通过Express中间件完成。请研究使用文档中的before和after挂钩。

构建Webpack HMR的自然选择是什么?

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android