面试题 之 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.hqwc.cn/news/571556.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MicroPython字节码文件——mpy文件解析

参考文档:MicroPython .mpy files 前置注意点 mpy文件的二进制文件是一种嵌套格式。先描述外层模块,然后描述子模块。使用vint(变长编码)表示整数,当前字节最高位置1表示还有后续字节。不同版本的MicroPython对应的m…

中霖教育:不是会计专业能参加24年的中级会计师考试吗?

经常有很多同学问:我不是会计专业的能报中级会计师考试吗? 先来看报名需要满足的必要条件: 1、大学专科学历,从事会计工作满5年。 2、大学本科学历或学士学位,从事会计工作满4年。 3、第二学士学位或研究生班毕业&#xff0c…

通过Jmeter准备压测数据-mysql示例

1、新建线程组 总共30万条数据 2、创建jdbc链接 创建jdbc连接配置 配置mysql连接 需要在jmeter安装的路径\apache-jmeter-5.6.3\lib\ext 目录下添加mysql 驱动 3、创建jdbc请求 jdbc链接名称需要与上一步中的保持一致,同时添加insert语句 例如 INSERT INTO test…

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

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

iOS App 上架指南及关键

引言 上架App Store是将iOS应用提交申请并上线的过程,旨在让应用在App Store上展示,吸引用户并获取流量。本文将介绍iOS上架的整体流程,并提供一些建议和注意事项。 一、iOS上架的整体流程 1. 申请开发者账号 首先,需要申请苹…

【免费】面向多微网网络结构设计的大规模二进制矩阵优化算法

目录 1 主要内容 节点故障网络拓扑变化示意 约束条件 目标函数 2 部分代码 3 结果一览 4 下载链接 1 主要内容 当前电力系统中微电网逐步成为发展的主力军,微网中包括分布式电源和负荷,单一的微电网是和外部电源进行连接,即保证用电的…

灰豚技术:数字人系统一定要源码部署,原因有三

数字人源码部署指的是将AI数字人系统源代码进行安装和配置的过程。这通常涉及准备本地服务器或云服务器、准备域名并进行网站备案,然后将源码部署到服务器上。完成部署后,用户就可以开始运营自己的数字人平台,进行数字人的本地化部署&#xf…

NO11 蓝桥杯单片机之DS18B20数字温度计

DS18B20数字温度计这个模块和以往单片机学习的模块可能不同,这里还要知道其头文件(.h)和.c文件代码的理解。 具体这个温度计是怎么实现检测温度的,呃呃呃呃呃这可能就要去查阅专业资料,涉及的知识体系应该很庞大&…

LeetCode刷题---查询近30天活跃用户数

1.给出满足的条件,截止至2019-07-27的近30天 activity_date BETWEEN DATE_ADD(2019-07-27,INTERVAL -29 day) and 2019-07-27这里使用了Between and 函数和 Date_add函数 2.按照日期分组,统计活跃用户个数 select activity_date day,count(distinct(us…

Android Studio 无法下载 gradle-7.3.3-bin.zip

下载新的Android Studio,然后创建新的工程时,出现报错:Could not install Gradle distribution from https://services.gradle.org/distributions/gradle-7.3.3-bin.zip 或者超时,我们可以复制:https://services.grad…

笔记本作为其他主机显示屏(HDMI采集器)

前言: 我打算打笔记本作为显示屏来用,连上工控机,这不是贼方便吗 操作: 一、必需品 HDMI采集器一个 可以去绿联买一个,便宜的就行,我的大概就长这样 win10下载 PotPlayer 软件 下载链接:h…

基于云计算的前端资源管理系统的设计与实现

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 随着互联网的快速发展,前端资源管理成为了一个重要的课题。本文旨在设计并实…