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

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

相关文章

理解CPU与执行指令原理

本文侧重介绍cpu的工作任务,与cpu执行指令的过程是怎么样的? 目录 1.理解CPU 1.1.CPU的功能 1.2.CPU的逻辑构成 2.认识指令 2.1.什么是指令 2.2.CPU执行指令的准备工作(重点) 3.指令的执行过程 前景知识: 什么是计算机 就是遵循冯诺依…

阿里云部署宝塔,设置了安全组还是打不开。

1.在安全组是开放正确的端口好。8888要开,但是不只是开放8888,举个例子,https://47.99.53.222:17677/49706cf7这个,要开放17677这个端口号。 2.安全组要挂载到实例上,从三个点的进入点击管理实例,加到对应的…

深入聊聊企业数字化转型这个事儿

01 什么是数字化? 聊数字化,就不得不聊聊信息化、智能化。佛性的说:信息化是数字化的前世,智能化是数字化的来生!我习惯用一个结构化的图形来表示事物之间的关系,信息化、数字化、智能化的关系如下&#…

[flask] flask的基本介绍、flask快速搭建项目并运行

笔记 Flask Flask 本身相当于一个内核,其他几乎所有的功能都要用到扩展(邮件扩展Flask-Mail,用户认证Flask-Login,数据库Flask-SQLAlchemy),都需要用第三方的扩展来实现。比如可以用 Flask 扩展加入ORM、…

JVM本地方法

本地方法接口 NAtive Method就是一个java调用非java代码的接口 本地方法栈(Native Method Statck) Java虚拟机栈用于管理Java方法的调用,而本地方法栈用于管理本地方法的调用。 本地方法栈,也是线程私有的。 允许被实现成固定或…

想做抖音小店又不会该怎么办?先学会做店出单逻辑,再入门

大家好,我是电商花花。 现在在这个巨大的电商市场中,很多人都被电商的巨大红利给勾起来了,在这个抖音小店的黑马项目中,很多人都在其中赚钱获利,吸引了一批又一批商家。 相信现在对电商感兴趣的仍不在少数&#xff0…

Navicat BI 工具 | 连接数据

早前,海外 LearnBI online 博主 Adam Finer 对 Navicat Charts Creator 这款 BI(商业智能)工具进行了真实的测评。上一期,我们介绍了这位博主对 Navicat BI 工具的初始之感。今天,我们来看看从连接数据的角度&#xff…

Tomcat 下载以及安装

Tomcat安装及配置教程主要分为四步: 步骤一:首先确认自己是否已经安装JDK 1. cmd:查看java的版本 步骤二:下载安装Tomcat 1. 下载tomcat :Apache Tomcat - Welcome! 2. 选择对应的tomcat版本: 3. 进行安装&#…

C# 登录界面代码

背景 MVVM 是一种软件架构模式,用于创建用户界面。它将用户界面(View)、业务逻辑(ViewModel)和数据模型(Model)分离开来,以提高代码的可维护性和可测试性。 MainWindow 类是 View&a…

38 mars3d 对接地图图层 绘制点线面员

前言 这里主要是展示一下 mars3d 的一个基础的使用 主要是设计 接入地图服务器的 卫星地图, 普通的二维地图, 增加地区标记 基础绘制 点线面园 等等 测试用例 <template><div style"width: 1920px; height:1080px;"><div class"mars3dClas…

【论文笔记】RobotGPT: Robot Manipulation Learning From ChatGPT

【论文笔记】RobotGPT: Robot Manipulation Learning From ChatGPT 文章目录 【论文笔记】RobotGPT: Robot Manipulation Learning From ChatGPTAbstractI. INTRODUCTIONII. RELATED WORK1. LLMs for Robotics2. Robot Learning III. METHODOLOGY1. ChatGPT Prompts for Robot …

【leetcode】双“指针”

标题&#xff1a;【leetcode】双指针 水墨不写bug 我认为 讲清楚为什么要用双指针 比讲怎么用双指针更重要&#xff01; &#xff08;一&#xff09;快乐数 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数…

我们常用Linux命令总结

Linux作为一种自由和开放源代码的操作系统&#xff0c;广泛应用于各种计算机系统中&#xff0c;尤其是服务器环境。在Linux系统中&#xff0c;命令行是管理和操作系统的主要方式之一&#xff0c;熟练掌握常用的Linux命令对于系统管理员、开发人员和其他使用者来说都是至关重要的…

HDLBits刷题Day28,3.2.5.14 3.2.5.14 one-hot FSM

3.2.5.14 one-hot FSM 问题描述 给定以下具有 1 个输入和 2 个输出的状态机&#xff1a; 假设此状态机使用 one-hot 编码&#xff0c;其中state[0]到state[9]分别对应于状态 S0 到 S9。除非另有说明&#xff0c;否则输出为零。 仅实现状态机的状态转换逻辑和输出逻辑部分。您在…

Jsonpath - 数据中快速查找和提取的强大工具

JSON&#xff08;JavaScript Object Notation&#xff09;在现代应用程序中广泛使用&#xff0c;但是如何在复杂的JSON数据中 查找和提取所需的信息呢&#xff1f; JSONPath是一种功能强大的查询语言&#xff0c;可以通过简单的表达式来快速准确地定位和提取JSON数据。本文将介…

Spring boot2.X 配置https

背景 最近项目组说要将 http 升级成 https 访问&#xff0c;证书也给到我们这边了&#xff0c;当然我们这边用的是个二级域名&#xff0c;采用的是通配符访问的方式&#xff0c;比如一级域名是这样&#xff08;com.chinaunicom.cn&#xff09;&#xff0c;我们的则是&#xff0…

css预处理器scss的使用如何全局引入

目录 scss 基本功能 1、嵌套 2、变量 $ 3、mixin 和 include 4、extend 5、import scss 在项目中的使用 1、存放 scss 文件 2、引入 variables 和 mixins 2-1、局部引入 2-2、全局引入 3、入口文件中引入其他文件 项目中使用 css 预处理器&#xff0c;可以提高 cs…

【面试】Elasticsearch 在部署时,对 Linux 的设置有哪些优化方法?

Elasticsearch 在部署时&#xff0c;对 Linux 的设置有哪些优化方法&#xff1f; Elasticsearch是一个分布式搜索和分析引擎&#xff0c;它在Linux环境下的性能和稳定性可以通过一些优化方法进行提升。以下是一些针对Linux环境下Elasticsearch部署的优化方法&#xff1a; 1. 内…

一文搞懂大疆机场kmz航线和图新地球导出的kmz的区别

0序&#xff1a; 近期有用户问“ 把KML文件放到图新后&#xff0c;想转出来KMZ&#xff08;大疆的机场用的格式&#xff09;但是转出来的KMZ显示格式不对 ” 之前只是知道大疆的航线规划采用的是kml规范&#xff0c;但具体是什么样并不清楚。就这这个问题把这个事情给弄明白。…

京东电商数据采集的三种方式|电商数据API接口实时数据采集

要实现电商的数据分析&#xff0c;电商数据采集是很重要的一环。电商数据采集要分几个步骤完成&#xff1f;每个步骤的意义是什么&#xff1f;每个步骤分别需要怎样的技能&#xff1f;今天这篇文章告诉你。 电商的数据通常需要通过数据采集的方式获得。电商数据采集方法共分为…