面试题 之 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.mzph.cn/news/774089.shtml

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

相关文章

SpringBoot-注解:@Async 使用

不同类中使用Async 线程配置初始化类-ThreadPoolConfig package com.zzdy.recharge.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.scheduling.annotation.EnableA…

迁移android studio 模拟器位置

android studio 初始位置是安装在c盘,若是要迁移需 1创建一个目标位置如我的F:/avd 2在系统环境变量里面设置新的地址 变量名:ANDROID_SDK_HOME 变量值:F:/avd 3最重要的是文件复制,将C盘里面avd的上层目录.android的目录整体…

【哈希专题】【蓝桥杯备考训练】:星空之夜、模拟散列表、字符串哈希、四平方和、扫雷【已更新完成】

目录 1、星空之夜(usaco training 5.1) 2、模拟散列表(模板) 3、字符串哈希(模板) 4、四平方和(第七届蓝桥杯省赛C A组/B组 & JAVA B组/C组) 5、扫雷(Google Ki…

2024室内设计和建筑必须知道的十大3D渲染趋势!

2023年对建筑圈是非常不平凡的一年,高清视频渲染、元宇宙全覆盖、AI模型大爆发.....不断发展的 3D 数字技术世界正迅速重塑建筑设计行业。 2024年,室内设计和建筑设计领域在3D渲染方面又将迎来怎样的变革?以下十大3D渲染趋势,你不…

python dict 序列化

python dict 序列化 在Python中,可以使用json模块来序列化(转换为JSON格式的字符串)和反序列化(将JSON格式的字符串转换回字典)一个字典。 序列化: import json # 假设有一个字典 data { name: J…

五、Elasticsearch 集成

目录 5.1 Spring Data 框架集成5.1.1 Spring Data 框架介绍5.1.2 Spring Data Elasticsearch 介绍5.1.3 Spring Data Elasticsearch 版本对比5.1.4 集成步骤 5.1 Spring Data 框架集成 5.1.1 Spring Data 框架介绍 Spring Data 是一个用于简化数据库开发的开源框架。其主要目…

❤️算法笔记❤️-(每日一刷-26、删除有序数组的重复项)

文章目录 题目思路解法 题目 给你一个 非严格递增排列 的数组 nums ,请你** 原地** 删除重复出现的元素,使每个元素 只出现一次 ,返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯…

【python】(07)理解Python中函数的参数类型

系列文章回顾 【python】(01)初识装饰器Decorator 【python】(02)初识迭代器Iterator 【python】(03)初识生成器Generator 【python】(04)python中实现多任务并发和并行的区别 【python】(05)如何使用python中的logging模块记录日志信息 【python】(06)理解Python中的 lambda 、…

【JVM】JVM简介

文章目录 🌴简介🌲JVM发展史🌸Sun Classic VM🌸Exact VM🌸HotSpot VM🌸JRockit🌸J9 JVMTaobao JVM(国产研发) 🌳JVM 运行流程⭕总结 🌴简介 JVM …

c语言中动态内存管理

说到内存,大家一定都知道。但是有一种函数可以实现动态内存管理,下面大家一起学习。 文章目录 一、为什么要有动态内存管理?二、malloc 和 free1.malloc2.free 三、calloc 和 realloc1.calloc2.realloc3.常见的动态内存的错误3.1对NULL指针的…

C++之std::mem_fn使用和实现原理(全)

C进阶专栏:http://t.csdnimg.cn/5mV9r 目录 1.简介 2.使用 3.实现原理 4.使用注意 5.总结 1.简介 函数模板std :: mem_fn生成指向成员的指针的包装对象,该对象可以存储,复制和调用指向成员的指针。 调用std :: mem_fn时,可以…

SpringMVC基础Controller

文章目录 Controller 的编写和配置1. Controller 注解类型2. RequestMapping 注解类型3. 编写请求方法4. 请求参数和路径变量 Controller 的编写和配置 Controller 注解和 RequestMapping 注解是 Spring MVC 最重要的两个注解。 使用基于注解的控制器的优点如下: …

c++ 有名对象和匿名对象

c 有名对象和匿名对象 有名对象就是有名字的对象&#xff0c;匿名对象就是没有名字的对象。 #define _CRT_SECURE_NO_WARNINGS 1 using namespace std; #include<iostream> class score { public:score(){math 100;chinese 100;english 100;}score(int _math, int _…

Java Web-Tomcat

Web服务器 Web服务器是一个软件程序,对HTTP协议的操作进行封装,使得程序员不必直接对协议进行操作,让Web开发更加便捷。主要功能是“提供网上信息浏览服务”。 Tomcat&#xff0c;是一个 HTTP 服务器。我们只需要在服务器中安装一个Web服务器如Tomcat&#xff0c;然后就可以将…

面试算法-116-组合总和 II

题目 给定一个候选人编号的集合 candidates 和一个目标数 target &#xff0c;找出 candidates 中所有可以使数字和为 target 的组合。 candidates 中的每个数字在每个组合中只能使用 一次 。 注意&#xff1a;解集不能包含重复的组合。 示例 1: 输入: candidates [10,1,…

二叉树与递归

二叉树的三种遍历方法&#xff1a; 前序遍历&#xff1a;根结点 —> 左子树 —> 右子树 中序遍历&#xff1a;左子树—> 根结点 —> 右子树 后序遍历&#xff1a;左子树 —> 右子树 —> 根结点 下面是三种遍历的代码和计算树的大小&#xff0c;计算叶子的…

C#面:选择题:关于try-catch-finally

下列关于 try…catch…finaly 语句的说明中&#xff0c;不正确的是&#xff1a; A)catch块可以有多个 B)finaly总会执行 C)catch块也是可选的 D)可以只有try块 答&#xff1a;D 解析&#xff1a; A)catch块可以有多个&#xff1a; 可以使用多个catch块来捕获不同类型的异常…

数据安全之路:Databend 用户策略指南

在 Databend 中&#xff0c;我们致力于保护用户的数据安全。除了身份认证之外&#xff0c;我们还提供了多种访问策略&#xff0c;包括网络策略&#xff08;Network Policy&#xff09;、密码策略&#xff08;Password Policy&#xff09;和数据脱敏策略&#xff08;Masking Pol…

JavaScript进阶5之垃圾回收(计算机组成、解释与编译、JavaScript引擎、垃圾回收、内存管理)、运行机制(浏览器进程分类、浏览器事件循环)

垃圾回收&运行机制 垃圾回收计算机组成解释与编译JavaScript引擎V8引擎 垃圾回收引用计数法标记清除&#xff08;mark-sweep&#xff09;算法 内存管理新生代 运行机制浏览器进程分类&#xff1a;浏览器事件循环宏任务微任务整体流程浏览器事件循环案例一案例二 垃圾回收 …

Android OpenMAX - 开篇

Android Media是一块非常庞大的内容&#xff0c;上到APP的书写&#xff0c;中到播放器的实现、封装格式的了解&#xff0c;下到OMX IL层的实现、Decoder的封装&#xff0c;每一块都需要我们下很大的功夫学习。除此之外&#xff0c;我们还要对一些相关的模块进行了解&#xff0c…