背上花里胡哨的书包准备run之webpack篇(+一些常问的面试题)

webpack理解?

Webpack 是一个现代的静态模块打包工具。它是一个基于配置的构建工具,用于将多个模块(包括 JavaScript、样式表、图像等)打包成一个或多个 bundle,并提供了一种优化资源加载和管理的方式。

主要概念和工作原理:

入口(Entry):Webpack 通过指定一个入口文件来开始构建过程。入口可以是单个文件或多个文件,Webpack 将从入口文件开始分析依赖关系树。

输出(Output):Webpack 会将打包后的资源输出到指定目录。输出通常是一个或多个 bundles,其中包含被 chunk 包裹的模块。

模块(Module):Webpack 将项目中的所有文件视为模块。每个模块都有自己的类型(JavaScript、CSS、图片等),Webpack 根据不同的类型使用对应的 loader 进行处理。

Loader:Loader 是用于对不同类型的模块进行处理和转换的插件。例如,Babel Loader 可以将 ES6/ES7 代码转换为浏览器可识别的 ES5 代码。

插件(Plugin):插件是用于扩展 Webpack 功能的组件。可以用插件来处理更复杂的任务,如生成 HTML 文件、压缩代码等。

开发服务器(DevServer):Webpack 提供了一个开发服务器,用于在开发过程中实时更新修改后的代码,并提供热模块替换功能。

模式(Mode):Webpack 提供了三种模式,分别是开发模式、生产模式和 none 模式。每种模式都有对应的配置,用于优化构建结果。

通过配置文件(通常是 webpack.config.js),开发人员可以定义入口、输出、loader、插件等来自定义项目的打包流程。Webpack 会根据配置文件的设置进行相应的处理和优化,最终生成可部署到生产环境的静态资源。

Webpack 的强大之处在于其模块化能力、灵活性和可扩展性。它可以处理多样化的资源类型并支持各种优化策略,使得前端项目的构建变得高效和可控。

webpack构建流程?

Webpack 的构建流程可以概括为以下几个步骤:

解析配置文件:Webpack 会根据项目根目录下的配置文件(默认为 webpack.config.js)来获取构建相关的配置选项。

解析入口文件:Webpack 根据配置文件中指定的入口文件路径,开始解析入口文件及其依赖关系。

加载模块:Webpack 使用不同的 loader 来处理不同类型的模块。在解析过程中,Webpack 会递归地加载和解析模块的依赖关系,并将它们加入到构建过程中。

插件执行:Webpack 在构建过程中提供了许多插件扩展的机会。插件可以用于执行各种任务,如优化、压缩、代码分割等。Webpack 会按顺序执行这些插件,并根据需要对模块和资源进行转换和处理。

输出文件:在构建完成后,Webpack 将生成的文件输出到指定的目录。输出的文件通常是一个或多个 bundle,包含了被 chunk 包裹的模块。

优化策略:Webpack 提供了一系列的优化策略,以提高构建结果的性能和体积。例如,代码压缩、Tree Shaking(消除未使用代码)、代码分割以及缓存等。

开发服务器:在开发过程中,Webpack 提供了一个开发服务器(DevServer),用于实时更新修改后的代码,并提供热模块替换功能。它能够在内存中构建和提供资源,加快开发效率。

整个流程中,Webpack 会根据配置文件的设置来确定入口文件、输出路径、加载器和插件等。在每个步骤中,Webpack 会使用各个加载器处理不同类型的模块,再通过插件对资源进行转换和优化。最终,Webpack 将生成的静态资源输出到指定目录,可用于部署到生产环境。

需要注意的是,该构建流程可以根据具体的配置和需求进行调整和扩展,以满足项目的需求

loader解决什么问题?

用于解决模块的转换和加载问题。它们可以将不同类型的资源(如 JavaScript、CSS、图片等)转换为可在浏览器中直接使用的形式。

plugin解决什么问题?

用于解决一些特定的问题或实现额外的功能。它们可以在构建过程中介入,并对资源进行处理、优化和管理。

编写loader和plugin的思路?

编写 Loader 的思路:

1.了解要处理的文件类型和需要实现的功能。

2.创建一个 JavaScript 模块,该模块会导出一个函数作为 Loader 函数。

3.在 Loader 函数中,接收源文件内容作为参数,并对其进行处理和转换。

4.根据需求,可以使用现有的工具库或自己编写代码来完成转换逻辑。

5.最后,通过返回转换后的结果,将其传递给 Webpack 构建流程。

编写 Plugin 的思路:

1.确定插件的目的和功能。

2.创建一个 JavaScript 类,该类定义了插件的行为和配置选项。

3.在类中,实现 Webpack 插件接口(通常是 apply 方法),并在该方法中执行插件的逻辑。

4.在插件逻辑中,可以监听特定的构建事件,如文件生成、模块解析、编译完成等,并在这些事件发生时执行相应的操作。

5.根据需要,可以向构建过程中注入额外的资源、修改输出文件、优化代码等。

6.最后,将插件的实例添加到 Webpack 配置的 plugins 属性中,使其生效。

webpack热更新?

Webpack 热更新(Hot Module Replacement,HMR)是 Webpack 提供的一项功能,用于在开发过程中实时更新修改后的代码,而无需完全刷新页面。

热更新的工作原理如下:

在启动开发服务器(DevServer)时,Webpack 会将 HMR 相关的代码注入到构建结果中。

当文件发生改变时,Webpack 可以通过 WebSocket 和开发服务器进行通信,通知浏览器重新加载被修改的模块。

浏览器接收到更新通知后,使用新的模块替换旧的模块,只对有变化的部分进行替换,而不刷新整个页面。

要使用热更新,在 Webpack 配置中需要进行以下配置:

开启热更新功能:在配置中设置 hot: true。

使用 webpack-dev-server 插件来启动开发服务器,并设置 hot: true。

对于样式表,可以使用 style-loader 来自动应用样式的更新,无需手动刷新。

对于 JavaScript 模块,需要在入口文件中添加适当的代码,以便让 Webpack 监听模块的更新并触发热更新。

实际上,大多数的现代前端框架(如 React、Vue 等)已经集成了热更新功能,并且提供了相关的开发工具和插件来简化配置和使用。

热更新可以大幅提高开发效率,因为它使得在修改代码后无需手动刷新页面即可查看到变化。然而,需要注意的是,热更新仅适用于开发环境,不应部署到生产环境中。在生产环境中,应该生成优化过的静态资源供用户访问。

如何提高webpack的构建速度?

1使用更快的构建工具:升级 Node.js 版本和 Webpack 版本,以获得对构建性能的改进。

2合理配置 entry 和 output:根据项目需求,合理配置入口文件和输出目录,避免不必要的资源扫描和输出。

3使用缓存:使用 Webpack 的缓存机制(如 cache-loader 插件)以及 Babel 的缓存配置,以便在重新构建时复用之前的结果,减少重复工作。

4只处理必要的文件:通过配置 include 和 exclude 选项来限制 loader 和 plugin 的处理范围,只处理必要的文件。

5模块热替换(HMR):在开发环境中启用 HMR,可以使修改后的模块实时生效,而无需完全重新构建。

6使用 HappyPack 或 thread-loader:将构建任务并发执行,利用多核 CPU 加速构建过程。

7减小文件体积:通过代码拆分、Tree Shaking、压缩等方式减小文件体积,减少网络传输时间。

8懒加载:对于大型应用或页面,使用懒加载技术(如动态导入)延迟加载非必要的资源。

9优化 loader 和 plugin:选择高效的 loader 和 plugin,避免使用过度复杂或低效的工具。

10使用 DLL(动态链接库):将不经常变化的第三方库打包成 DLL,以减少构建时间。

11开启并行压缩:对于需要压缩的文件,使用 parallel-uglify-plugin 等插件进行并行压缩。

12分析构建性能:使用 Webpack 的性能分析工具(如 webpack-bundle-analyzer)来识别构建中的瓶颈,并优化相应的配置和代码。

git老子直接用sourcetree

常用命令?

git init: 在当前目录初始化一个新的 Git 仓库。

git clone <repository>: 克隆(下载)远程仓库到本地。

git add <file>: 将文件添加到暂存区。

git commit -m "<message>": 提交暂存区中的文件,并添加提交信息。

git status: 查看工作树和暂存区的状态。

git log: 查看提交历史记录。

git diff <file>: 查看文件的修改内容。

git branch: 列出所有分支。

git checkout <branch>: 切换到指定的分支。

git merge <branch>: 合并指定分支到当前分支。

git pull: 拉取远程仓库的最新变更。

git push: 推送本地提交到远程仓库。

git remote add <name> <url>: 添加远程仓库的别名和 URL。

git remote -v: 查看远程仓库的别名和 URL。

git stash: 暂存当前的修改,以便切换到其它分支。

git reset HEAD <file>: 取消对文件的暂存操作。

git revert <commit>: 撤销指定的提交。

git rm <file>: 删除文件,并将删除操作添加到暂存区。

http?http和https区别?

HTTP 是一种常用的协议,适用于对安全性要求不高的场景,而 HTTPS 则提供了更加安全的通信方式,适用于需要保护用户数据隐私和防止篡改的应用场景。

http常见状态码?

200 OK:请求成功。服务器成功处理了请求,并返回相应的内容。

301 Moved Permanently:永久重定向。请求的资源已经被分配了新的 URL,以后应使用新的 URL。

302 Found:临时重定向。请求的资源暂时移动到了其他 URL,客户端应继续使用原始 URL。

400 Bad Request:无效请求。服务器无法理解或无法处理该请求。

401 Unauthorized:未授权。需要身份验证才能获得访问权限。

403 Forbidden:禁止访问。服务器拒绝访问所请求的资源。

404 Not Found:未找到。服务器无法找到请求的资源。

500 Internal Server Error:服务器内部错误。服务器在处理请求期间发生了意外情况。

502 Bad Gateway:错误的网关。作为代理或网关的服务器从上游服务器接收到无效响应。

503 Service Unavailable:服务不可用。服务器暂时无法处理请求(可能是由于过载或维护)。

get和post区别?

请求参数位置:GET 请求将参数附加在 URL 的查询字符串中(例如 example.com/path?param1=value1¶m2=value2),而 POST 请求将参数放在请求体中。

请求参数长度限制:GET 请求对参数长度有限制,不同浏览器和服务器可能有不同限制,通常在 2000-8000 字节之间。POST 请求没有这个限制

安全性:GET 请求参数暴露在 URL 中,容易被窃取和篡改,因此不适合传输敏感信息。POST 请求将参数放在请求体中,相对安全一些。

缓存机制:GET 请求默认可以被缓存,可以通过设置响应头来控制缓存行为;POST 请求默认不会被缓存。

幂等性:GET 请求是幂等的,即多次重复请求得到的结果应该是相同的,不会对服务器产生副作用。POST 请求在多次重复请求时可能会对服务器产生副作用,如插入重复数据。

使用场景:GET 请求适用于获取资源、查询操作,对于无需修改服务器状态的操作;POST 请求适用于提交表单数据、新增资源、修改服务器状态等需要发送大量数据或进行写操作的场景。

总结起来,GET 请求适合获取数据,对服务器无副作用;POST 请求适合发送数据、进行修改操作。

地址栏输入url敲下回车后发生了什么?

1、URL 解析:浏览器解析输入的 URL,并分解为协议、域名、端口号和路径等组成部分。

2、DNS 解析:浏览器向本地 DNS 服务器发送域名查询请求,以获取对应的 IP 地址。如果本地 DNS 缓存中没有该域名的记录,则会进行迭代查询,直到找到对应的 IP 地址。

3、建立 TCP 连接:浏览器使用 HTTP 或 HTTPS 协议,通过操作系统底层的网络 API(如 sockets)来建立与服务器的 TCP 连接。这个过程涉及三次握手,即客户端向服务器发送 SYN 包,服务器回复 SYN+ACK 包,最后客户端发送 ACK 包确认连接建立。

4、发送 HTTP 请求:建立好 TCP 连接后,浏览器向服务器发送 HTTP 请求。请求中包含请求方法(GET、POST 等)、路径、请求头(如 User-Agent、Cookie 等)和可选的请求体。

5、服务器处理请求:服务器接收到请求后,根据请求路径和其他信息,进行相应的处理。可以是返回静态文件、执行动态代码、查询数据库等操作。

6、服务器发送响应:服务器将处理结果打包成 HTTP 响应,包括响应状态码、响应头(如 Content-Type、Content-Length 等)和响应体(如 HTML 内容、JSON 数据等),通过建立的 TCP 连接发送给浏览器。

7、浏览器渲染页面:浏览器接收到响应后,根据响应中的内容类型进行相应处理。如果是 HTML 页面,浏览器会解析 HTML、CSS 和 JavaScript,并将其渲染显示在窗口中。

8、断开 TCP 连接:当服务器完成响应并关闭连接时,或者浏览器接收到指定的数据长度后,会断开与服务器的 TCP 连接。

这些步骤描述了从用户输入 URL 到浏览器显示网页的主要过程。在实际情况中,可能还有其他的网络优化技术和缓存机制来提高性能和减少延迟。

浏览器工作原理?

1、用户界面:浏览器的用户界面包括地址栏、前进和后退按钮、书签等。它提供给用户与浏览器进行交互的方式。

2、URL 请求和解析:当用户在地址栏中输入 URL 或点击链接时,浏览器会解析该 URL,确定要请求的资源的位置。

3、网络请求:浏览器使用网络协议(如 HTTP、HTTPS)发送请求到服务器,请求特定的资源。这涉及 DNS 解析、建立 TCP 连接、发送请求等过程。

4、HTML 解析:一旦浏览器接收到服务器返回的响应,通常是 HTML 文档,它会对 HTML 进行解析并构建 DOM (文档对象模型)树。这个树结构表示了页面上的元素及其关系。

5、渲染引擎:浏览器使用渲染引擎来处理解析后的 DOM 树和 CSS 样式表,以将网页内容显示在屏幕上。渲染引擎会计算元素的大小和位置,并将它们绘制到屏幕上。

6、JavaScript 解析和执行:如果网页中包含 JavaScript 代码,浏览器会将其解析和执行。JavaScript 可以修改 DOM、处理用户交互、发起网络请求等操作。

7、用户交互处理:浏览器会监听用户的交互事件(如鼠标点击、键盘输入),并执行相应的操作。这包括响应用户输入、更新页面内容等。

8、响应式布局:现代浏览器支持响应式布局,可以根据不同设备的屏幕大小和分辨率自动调整页面的布局和样式,以提供更好的用户体验。

9、缓存管理:浏览器通过缓存机制来提高页面加载速度。它会缓存已经访问过的资源(如图片、脚本),以便在下次访问时直接从缓存中获取,而无需再次请求服务器。

10、安全性保护:浏览器还提供了一些安全机制,如阻止恶意软件下载、跨站脚本攻击防护、隐私保护等,以确保用户的安全和隐私。

以上是浏览器的基本工作原理,不同浏览器可能有细微的差异和优化。浏览器的设计目标是提供快速、稳定、安全的网络浏览体验,并支持各种网页技术和功能。

老天保佑🙏 求求了,别问我这些,本宝宝记不住哇😭

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

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

相关文章

【论文阅读】基于深度学习的时序预测——Informer

系列文章链接 论文一&#xff1a;2020 Informer&#xff1a;长序列数据预测 论文二&#xff1a;2021 Autoformer&#xff1a;长序列数据预测 文章地址&#xff1a;https://arxiv.org/abs/2012.07436 github地址&#xff1a;https://github.com/zhouhaoyi/Informer2020 参考解读…

MFC遍历目录包括子目录下所有文件、特定类型文件

文章目录 用法实现遍历所有文件遍历所有txt文件用法 vector<CString> v; //获取所有文件 GetFilePath(v,L"D:\\test\\"); //文件路径储存在容器里面,遍历容器 for(int i=0

比特鹏哥5-数组【自用笔记】

比特鹏哥5-数组【自用笔记】 1.数组的概念2.一维数组的创建和初始化创建的语句结构初始化的语句结构 3.一维数组的使用数组的下标&#xff1a;从0开始&#xff0c;n个数组&#xff0c;最后一个的下标是n-1 4.一维数组在内存中的存储5.sizeof计算数组元素个数可以计算元素个数并…

计算机工作原理:进程调度

在计算机中&#xff0c;什么是进程&#xff1f;一个跑起来的程序就是一个进程&#xff0c;没跑起来就只能算一个程序。 在windows的任务管理器中&#xff0c;可以很清楚的看到有哪一些进程。 进程&#xff08;progress&#xff09;也叫任务&#xff08;task&#xff09;。 每…

侯捷 C++面向对象编程笔记——10 继承与虚函数

10 继承与虚函数 10.1 Inheritance 继承 语法&#xff1a;:public base_class_name public 只是一种继承的方式&#xff0c;还有protect&#xff0c;private 子类会拥有自己的以及父类的数据 10.1.1 继承下的构造和析构 与复合下的构造和析构相似 构造是由内而外 Container …

UML-活动图

目录 一.活动图概述: 1.活动图的作用&#xff1a; 2.以下场合不使用活动图&#xff1a; 3.活动图的基本要素&#xff1a; 4.活动图的图符 4.1起始状态 4.2终止状态 4.3状态迁移 4.4决策点 4.5同步条:表示活动之间的不同 5.活动图: 二.泳道&#xff1a; 1.泳道图&a…

有人管一管小天才电话手表吗?

作者 | 张未 来源 | 洞见新研社 潮流果然是个圈&#xff0c;曾经风靡2008年的“摇一摇”重回我们的视野当中。 这个对于成年人有些过时的产物&#xff0c;以儿童手表为载体&#xff0c;正入侵着小学生的社交圈&#xff0c;成为儿童的“社交密码”。 “碰一碰”加好友&#x…

vue3+ts 动态导入多文件组件

1、在components文件夹中新建index.ts文件&#xff08;components文件夹下为创建的组件&#xff09; // index.ts const modules import.meta.globEager("./*.vue"); //参数为组件路径 let componentsOpts {}const getCaption (obj, str, z: boolean) > {let…

php获取随机不重复数字(封装函数直接拿来用)

在PHP中获取随机值这种操作非常常见&#xff0c;比如订单号&#xff0c;密码加密&#xff0c;以及验证码等&#xff0c;那么在本文介绍一种获取随机不重复数字的函数。 主要核心就是生成随机数函数&#xff1a;mt_rand() 由于这里获取的是不重复的随机数&#xff0c;所以需要…

亚马逊公告:订单存档政策调整,超过两年将于9月起存档

站斧浏览器获悉&#xff1a; 亚马逊新公告&#xff1a;2023年9月起&#xff0c;亚马逊美国站和欧洲站宣布将调整订单数据存档政策。这一政策的调整旨在保护客户的个人隐私和数据安全&#xff0c;从而提高客户的购物体验。据悉&#xff0c;所有历时超过两年以上的订单将按月进行…

【高频面试题】多线程篇

文章目录 一、线程的基础知识1.线程与进程的区别2.并行和并发有什么区别&#xff1f;3.创建线程的方式有哪些&#xff1f;3.1.Runnable 和 Callable 有什么区别&#xff1f;3.2.run()和 start()有什么区别&#xff1f; 4.线程包括哪些状态&#xff0c;状态之间是如何变化的4.1.…

如何将Linux上的cpolar内网穿透设置成 - > 开机自启动

如何将Linux上的cpolar内网穿透设置成 - > 开机自启动 文章目录 如何将Linux上的cpolar内网穿透设置成 - > 开机自启动前言一、进入命令行模式二、输入token码三、输入内网穿透命令 前言 我们将cpolar安装到了Ubuntu系统上&#xff0c;并通过web-UI界面对cpolar的功能有…

如何维护自己的电脑

目录 1、关于电脑选择的建议 1.1、价格预算 1.2、明确需求 1.3、电脑配置 1.4、分辨率 1.5、续航能力 1.6、品牌选择 1.7、用户评测 1.8、各个电商平台对比 1.9、最后决策 2、我的选择 3、电脑保养 3.1 外部清洁 3.2 安装软件 3.3 优化操作系统 3.4 维护硬件设…

web前端之CSS

文章目录 一、CSS简介1.1 CSS语法规则 二、CSS的引用方法2.1 定义行内样式表2.2定义内部样式表2.3链入外部样式表2.4导入外部样式表 三、CSS选择符3.1 基本选择符3.1.1 标签选择符3.1.2 class类选择符3.1.3 id选择符 3.2 复合选择符3.2.1 交集选择符&#xff08;合并选择器&…

Docker安装Hadoop分布式集群

一、准备环境 docker search hadoop docker pull sequenceiq/hadoop-docker docker images二、Hadoop集群搭建 1. 运行hadoop102容器 docker run --name hadoop102 -d -h hadoop102 -p 9870:9870 -p 19888:19888 -v /opt/data/hadoop:/opt/data/hadoop sequenceiq/hadoop-do…

将matlab中工作区的数据保存为.mat文件及加载.mat数据

将matlab工作区中的数据保存为.mat文件 如数据a a[1 1 2 3 2 4];一、工作区数据 二、保存为.mat文件 利用save保存数据a到data.mat文件中 save(data.mat,a);三、加载数据 Iload(data.mat)

SEO搜索引擎优化

目录 场景 内部业务To B (Business-to-Business&#xff0c;B2B)需要降低SEO&#xff0c;反爬 客户业务To C (Business-to-Consumer&#xff0c;B2C)需要提高SEO TDK优化 Title&#xff08;标题&#xff09; Description&#xff08;描述&#xff09; Keywords&#xff…

matplotlib fig.legend()常用参数 包括位置调整和字体设置等

一、四种方法 legend() legend(handles, labels) legend(handleshandles) legend(labels)1 legend() labels自动通过绘图获取&#xff08;Automatic detection of elements to be shown in the legend&#xff09; # 第一种方法 ax.plot([1, 2, 3], labelInline label) ax.l…

Redis过期键删除策略

如果一个键过期了&#xff0c;那么它什么时候会被删除呢? 这个问题有三种可能的答案&#xff0c;它们分别代表了三种不同的删除策略&#xff1a; 1.定时删除&#xff1a;在设置键的过期时间的同时&#xff0c;创建一个定时器(timer)&#xff0c;让定时器在键的过期时间来临时…

Samba在Windows 11的网上邻居中不能显示

Centos 7 上的Samba服务器搭建好。在以前的Centos6上搭建的Samba一直都能正常显示在Windows 7、10、11的网络邻居中的&#xff0c;并且安卓设备的网络邻居也都可以显示出Samba&#xff0c;而现在只有Windows 7、10以及安卓设备能在网络邻居里显示Samba共享。甚至今天在完成所有…