面试题 之 webpack

1.说说你对webpack理解?解决什么问题?

Webpack 是实现前端项目的模块化,用于现代 JavaScript 应用程序的静态模块打包工具,被webpack 直接引用的资源打包进 bunde.js的资源,当webpack 处理应用程序时,它会在内部构建一个依赖图,依赖图对应映射到项目所需的每个模块 ,并生成一个或多个 bundle
解决问题:
1️⃣编译代码能力,提高效率,解决浏览器兼容问题
2️⃣模块整合能力,提高性能,可维护性,解决浏览器频繁请求文件的问题
3️⃣模块能力,项目维护性增强,支持不同种类的前端模块类型,统一的模块化方案,所有资源文件的加载都可以通过代码控制

2.说说webpack的热更新是如何做到的?原理是什么?

模块热更新指在应用程序运行过程中,替换、添加、删除模块、而无需重新刷新整个应用。
webpack中配置开启热模块
在这里插入图片描述
更改之后css可以直接更新,js需要额外操作指定模块来热更新
在这里插入图片描述
原理总结:
通过webpack-dev-server创建两个服务器: 提供静态资源的服务express和Socket服务
express server 负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)
socket server 是一个 websocket 的长连接双方可以通信当socket server 监听到对应的模块发生变化时,会生成两个文件.json和.js文件
通过长连接socket server 可以直接将这两个文件主动发送给客户端(浏览器)
浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新

3.说说webpack的构建流程?

1️⃣初始化流程:
从配置文件和 Shell 语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数:
2️⃣编译构建流程
从 Entry 发出,针对每个 Module 串行调用对应的 Loader 去翻译文件内容,再找到该 Module 依赖的 Module,递归地进行编译处理
3️⃣输出流程:
对编译后的 Module 组合成 Chunk,把 Chunk 转换成文件,输出到文件系统

4.说说webpack proxy工作原理?为什么能解决跨域?

webpack proxy基本行为就是接收客户端发送的请求后转发给其他服务器。通过webpack-dev-server来实现代理服务,将自动编译和自动刷新浏览器等集成在一起。webpack配置deServer属性里的proxy实现代理。
在这里插入图片描述
工作原理:
proxy 工作原理是利用 http-proxy-middleware 这个http 代理中间件,实现请求转发给其他服器。
解决跨域:在开发阶段, webpack-dev-server 会启动一个本地开发服务器,而后端服务又是运行在另外一个地址上所以在开发阶段中,由于浏览器同源策略的原因,当本地访问后端就会出现跨域请求的问题,通过设置 webpack proxy 实现代理请求后,在代理服务器传递数据给本地浏览器的过程中,两者同源,并不存在跨域行为,浏览器就能正常接收数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/492819.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Charles for Mac 强大的网络调试工具

Charles for Mac是一款功能强大的网络调试工具,可以帮助开发人员和测试人员更轻松地进行网络通信测试和调试。以下是一些Charles for Mac的主要特点: 软件下载:Charles for Mac 4.6.6注册激活版 流量截获:Charles可以截获和分析通…

CANalyzer使用_04 使用CAN报文发送数据

本文手把手介绍使用CAN来发送数据。分为创建工程,创建CAN报文,运行效果,参考文献。 1 创建工程 双击“CANalyzer->单击“I accept”->等一会等软件打开后,单击“File”->单击"New"->双击"CAN 500kBa…

2G-3G-4G-5G 语音方案

1.2G、3G时代,语音业务采用CS(Circuited Switched,电路交换)技术,即手机在通话前需在网络中建立一条独占资源的线路,直到通话结束才拆除。这种古老的技术存在耗资源、组网复杂、效率低等缺点。 2. 进入4…

每日学习笔记:C++ STL迭代器特性(Iterator Trait)、自定义迭代器

迭代器特性(Iterator Trait) 注意不同的迭代器种类类型之前有继承关系: 为迭代器编写泛型函数 自定义迭代器 实例

【Functional Affordances】机器人manipulation

文章目录 1. Robo-ABC: Affordance Generalization Beyond Categories via Semantic Correspondence for Robot Manipulation摘要和结论引言相关工作模型框架实验 2. Click to Grasp: Zero-Shot Precise Manipulation via Visual Diffusion Descriptors摘要和结论引言模型框架实…

电子商务营销中大数据分析的应用|大数据分析在B2C中的应用案例【抖音/京东/淘宝商品数据采集API接口的应用】

文章围绕对大数据分析在电子商务营销中的应用开展,研究了什么是大数据分析和电子商务的营销,以及对于电子商务的营销与大数据分析的结合目前是一个什么样的趋势,分析了大数据分析在电子商务营销中的作用,希望能帮助到大家。抖音/京…

码上时刻|通过逻辑视图 Logic View 快速实现批流一体

近年来,随着商业环境的竞争日益激烈,企业对于实时数据服务的需求急剧增加。Kyligence 在服务众多客户的过程中,很多企业对数据平台的要求越来越高,都希望能即时获取、处理数据,以便快速响应市场变化,加快决…

业界首次!搭载英伟达GPU,50倍性能提升!Zilliz发布Milvus 2.4向量数据库

在上周在美国硅谷圣何塞召开的NVIDIA GTC大会上,Zilliz[1] 发布了 Milvus 2.4 [2]版本。这是一款革命性的向量数据库系统,它在业界首次采用了英伟达 GPU 的高效并行处理能力和 RAPIDS cuVS 库中新推出的 CAGRA[3]( CUDA-Accelerated Graph In…

SpringBoot+ElasticSearch实现文档内容抽取、高亮分词、全文检索

需求 产品希望我们这边能够实现用户上传PDF、WORD、TXT之内得文本内容,然后用户可以根据附件名称或文件内容模糊查询文件信息,并可以在线查看文件内容。 一、环境 项目开发环境: 后台管理系统springbootmybatis_plusmysqles 搜索引擎&#…

c++AVL树

cAVL树 1. 前言 map/multimap、set/multiset这几个容器的共同点是:它们的底层都是按照搜索二叉树来实现的,但是搜索二叉树存在一个缺陷:如果往树中插入的元素有序或接近有序,二叉树搜索就会退化成单支树,时间复杂度会…

Java入门之数据类型

一、数据类型 基本数据类型 (1)如果要定义“long类型的变量要在数值后面加一个L作为后缀” (2)如果要定义float类型的变量的时候数据值也要加一个作为后缀 小结: 练习 内容: 姓名:巴巴托斯 &…

centos7二进制安装openstack train版本双网口五节点

这里写目录标题 材料准备宿主机安装KVM 网络规划硬件规划本案例局限性密码规划虚拟机准备网络准备centos7模板机准备 数据库安装安装rabbitMQ消息队列安装memcached服务安装Etcd安装keystone身份服务创建数据库用户keystone安装keystone组件创建admin并启动keystone监听验证key…

第3章:角色提示,强化Chatgpt输出新篇章!

角色提示技术 角色提示技术(role prompting technique),是通过模型扮演特定角色来产出文本的一种方法。用户为模型设定一个明确的角色,它就能更精准地生成符合特定上下文或听众需求的内容。 比如,想生成客户服务的回复…

新手如何去做性能测试?

1、性能测试是什么? 一句话概括:不断的通过不同场景的系统表现去探究系统设计与资源消耗之间的平衡。 具体一点:通过在测试环境下对系统或构件的性能进行探测,用以验证在生产环境下系统性能是否达到预估的性能需求,发…

堆排序在优先队列的应用及其C代码示例

堆排序在优先队列的应用及其C代码示例 一、引言二、堆排序的基本思想三、优先队列的实现四、最大优先队列的实现五、最小优先队列的实现六、性能分析七、C代码示例八、应用场景与实例九、堆排序与优先队列的进一步优化十、结论 一、引言 堆排序(Heap Sort&#xff…

javascript基础代码练习

一、输入新增病例数&#xff0c;累计确诊病例数&#xff0c;14天内聚集性疫情发生天数。新增或者累计确诊病例为0则该地区为低风险地区。新增大于0且累计确诊&#xff1c;50或者累计大于50且14天内聚集性疫情发生天数为0的地区为中风险地区。其他情况为高风险地区。 <!DOCT…

Live800:应对客户投诉的技巧与方法,以解决为导向

在商业世界中&#xff0c;客户投诉是无法避免的现象。无论你的产品或服务有多好&#xff0c;总会有一些客户对其不满。关键在于&#xff0c;你如何应对这些投诉。正确的处理方式可以转危为机&#xff0c;提升客户满意度&#xff0c;甚至增强品牌忠诚度。文章将探讨如何有效处理…

Python基础教程:基本数据类型

基本数据类型 不可变数据(3 个):Number(数字)、String(字符串)、Tuple(元组) 可变数据(3 个):List(列表)、Dictionary(字典)、Set(集合) Numbers(数字) 数字数据类型用于存储数值。 他们是不可改变的数据类型,这意味着改变数字数据类型会分配一个新的对…

Linux 进程信号:产生信号

目录 一、通过终端按键产生信号 1、signal()函数 2、核心转储 3、ulmit命令 二、调用系统函数向进程发信号 1、kill()函数 2、raise()函数 3、abort()函数 三、发送信号的过程 读端关闭、写端继续写入的情况 如何理解软件条件给进程发送信号: 四、软件条件产生信…

【Vue】可拖拽侧边栏实现

在本篇博客中&#xff0c;我们将探讨如何在 Vue.js 项目中实现一个可拖拽的侧边栏。此功能可以通过修改 HTML 和 Vue 组件的脚本来实现。 首先&#xff0c;我们需要在 HTML 文件中定义侧边栏的容器和用于拖拽的元素。在 Vue 组件中&#xff0c;我们将使用 Vue 的响应式系统来追…