前端面试题-webpack
1.webpack是什么?
模块打包工具,用于将前端资源,如JavaScript、css、图片等打包成可以在浏览器运行的静态资源。可以将多个模块打包成一个或多个bundle。
主要功能:
- 模块化:可以将多个模块打包成一个或多个bundle,方便管理维护。
- 自动化:可以自动处理和编译JavaScript等文件,提高开发效率。
- 性能优化:可压缩、去除无用代码等,提高网页加载速度。
- 扩展性:可通过插件进行扩展,实现定制化需求。
2.webpack和vite的区别?
核心原理:webpack基于静态分析,对项目进行模块化构建,通过打包将多个模块打包成静态资源。vite基于ES Module,通过启动服务器实现动态按需编译,减少不必要的构建过程。
性能:webpack打包速度较慢,因为需要遍历和解析所有的依赖关系。vite通过动态按需编译和缓存机制,提高了打包速度。
适用场景:webpack适用各类前端项目,尤其是对模块化和代码结构要求高的项目。vite适合快速开发迭代和实时构建的项目,如单页应用程序、博客网站。
配置复杂度:webpack配置相对复杂,需要手动配置各种家装器和插件等。
热更新机制:webpack的热更新需要整个模块链重新打包和替换。vite只针对改动的模块进行更新,提高更新速度。
3.如何配置 Webpack 的入口和输出?
module.exports = { entry: './src/main.js', //入口output: { //出口path: path.resolve(__dirname, './dist'), filename: 'bundle.js' } };
4.如何提高webpack的构建速度?
优化方案:
代码压缩:js/css/html代码进行压缩。
图片压缩
tree shaking:摇树,消除死代码,依赖于ES Moudle的静态语法分析。
减少ES6转ES5的冗余代码,bable-plugin-transform-runtime。
3.1 usedExports,通过标记某些函数是否被使用,通过Terser来进行优化
module.exports = {...optimization:{usedExports} }优化检测
- webpack-bundle-analyzer,可看出文件的大小和各自的依赖
- speed-measure-webpack-plugin,分析整个打包的耗时,获取每个loader和每个plugins构建所需要的时间
5.Webpack 配置中用过哪些 Loader ?都有什么作用?
- file-loader:将文件输出到指定的文件夹。
- url-loader:和file-loader类似,但可以在文件很小的情况下以base64的方式将文件内容注入到代码中。
- image-loader:加载并压缩图片。
- babel-loader:将ES6转成ES5代码。
- css-loader:加载css文件,支持模块化、压缩、文件导入等。
- style-loader:将css注入到JavaScript中,通过DOM操作加载css。
- eslint-loader:通过eslint检查JavaScript代码。
- postcss-loader:自动添加CSS3部分属性的浏览器前缀
6.Webpack 配置中用过哪些 Plugin ?都有什么作用?
html-webpack-plugin:自动生成HTML文件并注入生成的脚本和样式文件
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?PDF的一些优点版本摘要谁在使用PDF?有用的免费软件谁应该阅读 构建一个简单PDF文件基本PDF语法File StructureDocument ContentPage Content 构建简单PDF文件头目录,交叉引用表和文件尾主要对象图形内…...
Three.js 镜面反射Reflector 为MeshStandardMaterial增加Reflector能力
效果效果官方案例 区别:官方的案例更像一个镜子 没有纹理等属性 也没有透明度修改 根据源码进行修改为 MeshStandardMaterial实现反射 使用案例 createReflector() {const plane this.helper.create.plane(2, 2);this.helper.add(plane.mesh);plane.mesh.rotat…...
UE4使用技巧
打开蓝图编辑器时不是打开一个新窗口,而是作为主窗口 适用于全部的打开新窗口的操作 蓝图编译时自动保存 开始游戏后立即捕获鼠标...
行为型设计模式—职责链模式
职责链模式:从名字可以拆分为 职责 和 链。即能为请求创建一条由多个处理器组成的链路,每个处理器各自负责自己的职责,相互之间没有耦合,完成自己任务后请求对象即传递到链路的下一个处理器进行处理。 如果在写好的执行函数里加上…...
EndNote快速上手
前言:用EndNote主要就是为了方便管理文章引用的文献,所以本篇就是针对EndNote在文章中引用文献需要的技巧,然后本文用的是EndNoteX9。 EndNote快速上手 创建文献资料库创建文献分组导入文献手动输入文件导入在线搜索 修改文献信息去重文献删除…...
GRE隧道(初级VPN)配置步骤
一、拓朴图: 要求:1、PC1 和 PC2 能访问充当互联网接口地址的ISP环回口地址8.8.8.8 2、PC1 和 PC2 走GRE隧道互通 二、配置步骤: 1、配置IP 2、R1、R2 配置nat,代理内网地址通过G0/0/0口上外网 acl 2000rule permit source a…...
自然语言处理笔记
文章目录 情感词典中文分词单词向量化技术Word2vecGloVefastText 关键词提取算法 情感词典 英文的情感词典有:LIWC, SentiWordNet等 中文的情感词典有:NTUSD, 正文褒贬词典TSING, 知网HowNet等 中文分词 中文分词的工具有:jieba(核心算法是…...
广东省第三届职业技能大赛“网络安全项目”B模块任务书
广东省第三届职业技能大赛“网络安全项目”B模块任务书 PS: 关注鱼影安全第一部分 网络安全事件响应任务 1:应急响应 第二部分 数字取证调查任务 2 :操作系统取证任务 3: 网络数据包分析取证任务 4: 计算机单机取证 第三部分 应用…...
如何利用API接口获取电商平台数据?
作为产品经理,我们需要了解电商平台的数据情况,以便更好地制定产品策略和优化用户体验。而利用API接口获取电商平台数据是一种高效、便捷的方式。本文将从以下几个方面介绍如何利用API接口获取电商平台数据。 一、了解API接口 首先,我们需要…...
C语言天花板——指针(经典题目)
指针我们已经学习的差不多了,今天我来给大家分享几个经典的题目,来让我们相互学习🏎️🏎️🏎️ int main() {int a[4] { 1, 2, 3, 4 };int* ptr1 (int*)(&a 1);int* ptr2 (int*)((int)a 1);printf("%x,%…...
进程上下文的概念和切换简单通俗的解释
进程上下文是进程执行活动全过程的静态描述。我们把已执行过的进程指令和数据在相关寄存器与堆栈中的内容称为进程上文,把正在执行的指令和数据在寄存器与堆栈中的内容称为进程正文,把待执行的指令和数据在寄存器与堆栈中的内容称为进程下文。 实际上li…...
python学习笔记10(选择结构2、循环结构1)
(一)选择结构2 1、if……else……语句 #(1)基本格式 numbereval(input("请输入您的6位中奖号码:")) if number123456:print("恭喜您,中奖了") else:print("未中奖")#&…...
IPv6过渡技术---手动隧道
IPv6隧道 隧道(Tunnel)是一种封装技术。利用一种网络协议来传输另一种网络协议,即利用一种网络传输协议,将其他协议产生的数据报文封装在自身的报文中,然后在网络中传输。 隧道是一个虚拟的点对点的连接。一个Tunnel提供了一条使封装的数据报文能够传输的通路,并且在一个…...
Redis中的Java客户端
一、Jedis Jedis是一个Java实现的Redis客户端连接工具。 Jedis使用非常简单,直接引入依赖。基于默认参数的Jedis连接池,初始化连接池类(使用默认连接池参数)JedisPool,获取一个Jedis连接Jedis jedisjp.getResource()…...
线性代数——行列式相关性质
目录 一、行列式与它的转置列行列式相等 二、对换行列式的两行(列),行列式变号 三、行列式某行(列)有公因子k,则k可以提到行列式外 四、行列式中若两行成比例,则行列式为0 五、行列式的某一行…...
跟着cherno手搓游戏引擎【5】layer(层)、Glad
编写基类层: 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…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
深入浅出Diffusion模型:从原理到实践的全方位教程
I. 引言:生成式AI的黎明 – Diffusion模型是什么? 近年来,生成式人工智能(Generative AI)领域取得了爆炸性的进展,模型能够根据简单的文本提示创作出逼真的图像、连贯的文本,乃至更多令人惊叹的…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...
图解JavaScript原型:原型链及其分析 | JavaScript图解
忽略该图的细节(如内存地址值没有用二进制) 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么:保存在堆中一块区域,同时在栈中有一块区域保存其在堆中的地址(也就是我们通常说的该变量指向谁&…...
Django RBAC项目后端实战 - 03 DRF权限控制实现
项目背景 在上一篇文章中,我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统,为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...
