当前位置: 首页 > 面试题库 >

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

孟浩然
2023-03-14
问题内容

我开始在开发使用的服务器端渲染应用程序webpacknode/express环境中工作。我对每个Webpack包在开发和生产(运行时)环境中的作用感到非常困惑。ReactJS``react- 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:对不起,有什么错误的想法。我真的需要帮助,以便在复杂的环境中理解这些变体。如果方便,请添加更多可构成整个方案的软件包/数据。


问题答案:

webpack

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

[webpack-dev-middleware](https://github.com/webpack/webpack-dev-

middleware)

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

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

[webpack-dev-server](https://webpack.js.org/guides/development/#webpack-

dev-server)

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

[webpack-hot-middleware](https://github.com/glenjamin/webpack-hot-

middleware)

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

也…

[webpack-hot-server-middleware](https://html" target="_blank">github.com/60frames/webpack-hot-

server-middleware)

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



 类似资料:
  • 我开始工作与与环境开发一个服务器端渲染应用程序与。我对每个webpack包在dev和prod(运行时)环境中的作用感到非常困惑。 以下是我理解的总结: :是一个包,一个工具,用于将web应用程序的不同部分连接在一起,然后捆绑在一个单独的包中。js文件(通常是)。然后,结果文件在prod环境中提供,由应用程序加载,并包含运行代码所需的所有组件。功能包括缩小代码、缩小尺寸等。 :是一个提供服务器来处理

  • 概述 本文主要介绍 canal 产品整体设计,帮助你快速地熟悉代码脉络。如果你对 canal 还一无所知,只是知道他能进行数据迁移同步,那么建议先行阅读 [[Introduction]] 和 [[AdminGuide]] 两篇文档了解。 产品设计 server 代表一个 canal 运行实例,对应于一个 jvm instance 对应于一个数据队列 (1个 canal server 对应 1..n

  • dev-setup 搭建本地开发环境相关文档。

  • Dev C++是一个Windows环境下的一个适合于初学者使用的轻量级 C/C++ 集成开发环境(IDE)。它是一款自由软件,遵守GPL许可协议分发源代码。它集合了MinGW中的GCC编译器、GDB调试器和AStyle格式整理器等众多自由软件。 Dev C++使用MinGW/GCC编译器,遵循C/C++标准。开发环境包括多页面窗口、工程编辑器以及调试器等,在工程编辑器中集合了编辑器、编译器、连接程

  • dev-sidecar 是一款为开发者打辅助的边车工具,通过本地代理的方式将 http 请求代理到一些国内的加速通道上,能解决一些网站和库无法访问或访问速度慢的问题。 特性 dns优选 根据网络状况智能解析最佳域名ip地址,获取最佳网络速度 建议遇到打开比较慢的国外网站,可以优先尝试将该域名添加到dns设置中(注意:被GFW封杀的无效) 请求拦截 拦截打不开的网站,代理到加速镜像站点上去。 可配置

  • iphone-dev (iPhone toolchain) 项目的目的是创建一个免费、可移植、高质量的工具链用于在其他平台上开发 iOS 应用。