当前位置: 首页 > news >正文

前端面试题-webpack

1.webpack是什么?

模块打包工具,用于将前端资源,如JavaScript、css、图片等打包成可以在浏览器运行的静态资源。可以将多个模块打包成一个或多个bundle。

主要功能:

  1. 模块化:可以将多个模块打包成一个或多个bundle,方便管理维护。
  2. 自动化:可以自动处理和编译JavaScript等文件,提高开发效率。
  3. 性能优化:可压缩、去除无用代码等,提高网页加载速度。
  4. 扩展性:可通过插件进行扩展,实现定制化需求。
2.webpack和vite的区别?
  1.  核心原理:webpack基于静态分析,对项目进行模块化构建,通过打包将多个模块打包成静态资源。vite基于ES Module,通过启动服务器实现动态按需编译,减少不必要的构建过程。

  2. 性能:webpack打包速度较慢,因为需要遍历和解析所有的依赖关系。vite通过动态按需编译和缓存机制,提高了打包速度。

  3. 适用场景:webpack适用各类前端项目,尤其是对模块化和代码结构要求高的项目。vite适合快速开发迭代和实时构建的项目,如单页应用程序、博客网站。

  4. 配置复杂度:webpack配置相对复杂,需要手动配置各种家装器和插件等。

  5. 热更新机制:webpack的热更新需要整个模块链重新打包和替换。vite只针对改动的模块进行更新,提高更新速度。

3.如何配置 Webpack 的入口和输出?
module.exports = {  entry: './src/main.js',    //入口output: {    //出口path: path.resolve(__dirname, './dist'),  filename: 'bundle.js'  }  
};
4.如何提高webpack的构建速度? 

优化方案:

  1. 代码压缩:js/css/html代码进行压缩。

  2. 图片压缩

  3. tree shaking:摇树,消除死代码,依赖于ES Moudle的静态语法分析。

  4.  减少ES6转ES5的冗余代码,bable-plugin-transform-runtime。

        3.1 usedExports,通过标记某些函数是否被使用,通过Terser来进行优化

module.exports = {...optimization:{usedExports}
}

优化检测

  1. webpack-bundle-analyzer,可看出文件的大小和各自的依赖
  2. speed-measure-webpack-plugin,分析整个打包的耗时,获取每个loader和每个plugins构建所需要的时间
 5.Webpack 配置中用过哪些 Loader ?都有什么作用?
  1. file-loader:将文件输出到指定的文件夹。
  2. url-loader:和file-loader类似,但可以在文件很小的情况下以base64的方式将文件内容注入到代码中。
  3. image-loader:加载并压缩图片。
  4. babel-loader:将ES6转成ES5代码。
  5. css-loader:加载css文件,支持模块化、压缩、文件导入等。
  6. style-loader:将css注入到JavaScript中,通过DOM操作加载css。
  7. eslint-loader:通过eslint检查JavaScript代码。
  8. postcss-loader:自动添加CSS3部分属性的浏览器前缀
6.Webpack 配置中用过哪些 Plugin ?都有什么作用?
  1. html-webpack-plugin:自动生成HTML文件并注入生成的脚本和样式文件

  2. clean-webpack-plugin:打包前,自动清空打包目录

7.loader和plugin的区别?

loader用于处理非JavaScript模块的文件的转换,将文件作为输入并转换为webpack可以处理的模块。plugin用于扩展webpack的功能,可以在webpack构建中的不同阶段执行自定义操作。

相关文章:

前端面试题-webpack

1.webpack是什么? 模块打包工具,用于将前端资源,如JavaScript、css、图片等打包成可以在浏览器运行的静态资源。可以将多个模块打包成一个或多个bundle。 主要功能: 模块化:可以将多个模块打包成一个或多个bundle&…...

What is `WebMvcConfigurer` does?

WebMvcConfigurer 用于自定义和扩展SpringMVC的功能配置。 比如:可以配置如视图解析器、静态资源处理、消息转换器、拦截器等MVC相关的组件。 实现 WebMvcConfigurer 接口,并使用 Configuration 注解标记,使其成为一个配置类 Configuration …...

安全强化学习笔记

这里写自定义目录标题 参考资料 Safe Reinforcement Learning环境算法CPO 2017 ICMLPCPO 2019 ICLRFOCOPS 2020 NIPSCRPO 2021 ICMLCUP 2022 NIPS TRPO 如何看懂TRPO里所有的数学推导细节? - 小小何先生的回答 - 知乎 参考资料 Safe Reinforcement Learning 安全/约束强化学…...

POI-tl 知识整理:整理1 -> 利用模板向word中写入数据

1 文本传值 Testpublic void testText() throws Exception {XWPFTemplate template XWPFTemplate.compile("D:\\Idea-projects\\POI_word\\templates.docx");Map<String, Object> map new HashMap<>();map.put("title", "Hi, girl"…...

PDF结构详解

文章目录 介绍前言高保真的文件什么是PDF&#xff1f;PDF的一些优点版本摘要谁在使用PDF&#xff1f;有用的免费软件谁应该阅读 构建一个简单PDF文件基本PDF语法File StructureDocument ContentPage Content 构建简单PDF文件头目录&#xff0c;交叉引用表和文件尾主要对象图形内…...

Three.js 镜面反射Reflector 为MeshStandardMaterial增加Reflector能力

效果效果官方案例 区别&#xff1a;官方的案例更像一个镜子 没有纹理等属性 也没有透明度修改 根据源码进行修改为 MeshStandardMaterial实现反射 使用案例 createReflector() {const plane this.helper.create.plane(2, 2);this.helper.add(plane.mesh);plane.mesh.rotat…...

UE4使用技巧

打开蓝图编辑器时不是打开一个新窗口&#xff0c;而是作为主窗口 适用于全部的打开新窗口的操作 蓝图编译时自动保存 开始游戏后立即捕获鼠标...

行为型设计模式—职责链模式

职责链模式&#xff1a;从名字可以拆分为 职责 和 链。即能为请求创建一条由多个处理器组成的链路&#xff0c;每个处理器各自负责自己的职责&#xff0c;相互之间没有耦合&#xff0c;完成自己任务后请求对象即传递到链路的下一个处理器进行处理。 如果在写好的执行函数里加上…...

EndNote快速上手

前言&#xff1a;用EndNote主要就是为了方便管理文章引用的文献&#xff0c;所以本篇就是针对EndNote在文章中引用文献需要的技巧&#xff0c;然后本文用的是EndNoteX9。 EndNote快速上手 创建文献资料库创建文献分组导入文献手动输入文件导入在线搜索 修改文献信息去重文献删除…...

GRE隧道(初级VPN)配置步骤

一、拓朴图&#xff1a; 要求&#xff1a;1、PC1 和 PC2 能访问充当互联网接口地址的ISP环回口地址8.8.8.8 2、PC1 和 PC2 走GRE隧道互通 二、配置步骤&#xff1a; 1、配置IP 2、R1、R2 配置nat&#xff0c;代理内网地址通过G0/0/0口上外网 acl 2000rule permit source a…...

自然语言处理笔记

文章目录 情感词典中文分词单词向量化技术Word2vecGloVefastText 关键词提取算法 情感词典 英文的情感词典有&#xff1a;LIWC, SentiWordNet等 中文的情感词典有&#xff1a;NTUSD, 正文褒贬词典TSING, 知网HowNet等 中文分词 中文分词的工具有&#xff1a;jieba(核心算法是…...

广东省第三届职业技能大赛“网络安全项目”B模块任务书

广东省第三届职业技能大赛“网络安全项目”B模块任务书 PS: 关注鱼影安全第一部分 网络安全事件响应任务 1&#xff1a;应急响应 第二部分 数字取证调查任务 2 &#xff1a;操作系统取证任务 3&#xff1a; 网络数据包分析取证任务 4&#xff1a; 计算机单机取证 第三部分 应用…...

如何利用API接口获取电商平台数据?

作为产品经理&#xff0c;我们需要了解电商平台的数据情况&#xff0c;以便更好地制定产品策略和优化用户体验。而利用API接口获取电商平台数据是一种高效、便捷的方式。本文将从以下几个方面介绍如何利用API接口获取电商平台数据。 一、了解API接口 首先&#xff0c;我们需要…...

C语言天花板——指针(经典题目)

指针我们已经学习的差不多了&#xff0c;今天我来给大家分享几个经典的题目&#xff0c;来让我们相互学习&#x1f3ce;️&#x1f3ce;️&#x1f3ce;️ int main() {int a[4] { 1, 2, 3, 4 };int* ptr1 (int*)(&a 1);int* ptr2 (int*)((int)a 1);printf("%x,%…...

进程上下文的概念和切换简单通俗的解释

进程上下文是进程执行活动全过程的静态描述。我们把已执行过的进程指令和数据在相关寄存器与堆栈中的内容称为进程上文&#xff0c;把正在执行的指令和数据在寄存器与堆栈中的内容称为进程正文&#xff0c;把待执行的指令和数据在寄存器与堆栈中的内容称为进程下文。 实际上li…...

python学习笔记10(选择结构2、循环结构1)

&#xff08;一&#xff09;选择结构2 1、if……else……语句 #&#xff08;1&#xff09;基本格式 numbereval(input("请输入您的6位中奖号码&#xff1a;")) if number123456:print("恭喜您&#xff0c;中奖了") else:print("未中奖")#&…...

IPv6过渡技术---手动隧道

IPv6隧道 隧道(Tunnel)是一种封装技术。利用一种网络协议来传输另一种网络协议,即利用一种网络传输协议,将其他协议产生的数据报文封装在自身的报文中,然后在网络中传输。 隧道是一个虚拟的点对点的连接。一个Tunnel提供了一条使封装的数据报文能够传输的通路,并且在一个…...

Redis中的Java客户端

一、Jedis Jedis是一个Java实现的Redis客户端连接工具。 Jedis使用非常简单&#xff0c;直接引入依赖。基于默认参数的Jedis连接池&#xff0c;初始化连接池类&#xff08;使用默认连接池参数&#xff09;JedisPool&#xff0c;获取一个Jedis连接Jedis jedisjp.getResource()…...

线性代数——行列式相关性质

目录 一、行列式与它的转置列行列式相等 二、对换行列式的两行&#xff08;列&#xff09;&#xff0c;行列式变号 三、行列式某行&#xff08;列&#xff09;有公因子k&#xff0c;则k可以提到行列式外 四、行列式中若两行成比例&#xff0c;则行列式为0 五、行列式的某一行…...

跟着cherno手搓游戏引擎【5】layer(层)、Glad

编写基类层&#xff1a; Layer.h:提供Attach链接、Detach解绑、Update刷新、Event事件、GetName方法 #pragma once #include"YOTO/Core.h" #include"YOTO/Event/Event.h" namespace YOTO {class YOTO_API Layer{public:Layer(const std::string& nam…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...