关于webpack的知识点
一、什么是webpack?它的核心概念是什么?
webpack是现代JavaScript应用程序的打包工具
它的核心概念包括:
- 入口
- 输出
- loader
- plugin(插件)
- 模式
- 模块
- 依赖图
二、webPack与Grunt\Grulp有什么区别?
首先Grunt/Gulp是任务运行器,用来实现流程自动化的
webpack 是模块打包器,用来分析模块依赖关系并打包资源的 ;其次,webpack更加强大,支持模块化与代码分割
三、 说说webpack的构建流程?
- 初始化参数:根据配置文件以及shell语句读取参数
- 创建编译实例:根据上一步的参数,初始化compiler对象,它是整个构建过程的核心调度者
- 确定入口文件:根据配置的entry,确定所有的入口文件
- 解析模块:对入口文件,调用匹配的loader对模块进行转译、
- 转换模块:对非js资源,调用对应的
Loader
转换为 Webpack 能处理的模块- 完成编译:得到每个模块的转译内容与依赖关系
- 生成chunk:根据配置或者动态导入,将模块分组为chunk
- 输出资源:根据chunk调用template生成打包后的代码,将生成的文件内容写入文件系统中
- 完成构建:触发done钩子,通知插件构建完成;统计构建的信息(构建的耗时、体积等可以通过stats配置或者
webpack-bundle-analyzer
可视化)
四、 常用的loader有哪些?
处理ES6代码:bable-loader
处理css:css-loader
处理ts:ts-loader
处理文件、图片:file-loader/url-loader
处理预处理器的:sass-loader/less-loader
五、常用的plugin有哪些?
生成html文件:htmlWebpackplugin
处理css:mini-css-extract-plugin\css-minimizer-plugin
清理构建目录:clean-webpack-plugin
热更新:hot-module-replacement-plugin
压缩css:optimize-css-plugin
六、loader和plugin有什么区别呢?
loader:它是一种转换器,对于非js的资源,用loader转换成webpack可以处理的模块
plugin:它是一种扩展器,可以扩展webpack的功能,在构建时的特殊时期执行操作
七、自定义一个loader
module.export = function(source){return source.replace('word','webpack')
}// loader是一个函数,接受文件内容,返回处理后的内容
八、自定义一个plugin
class myPlugin {apply(compiler){compiler.hooks.done.tap('myPlugin',stats =>{console.log(stats,'编译完成')})}
}module.export = myPugin// plugin是一个类,内含apply函数,可以通过compiler.hooks访问webpack的生命周期钩子
九、 webpack如何实现代码分割的?
- 使用import动态导入语句,按需加载组件
- 使用split-chunks-plugin:通过配置 optimizetion,splitChunks 手动分配
十、如何提高webpack的构建速度?
- 使用ceche-loader或webpack5+版本内置了持久化缓存,提高构建速度
- 使用thread-loader做多进程的构建
- 通过配置减小loader的处理范围:配置exclude 和include
- 使用DllPlugin 预编译一些不常变动的模块
十一、如何优化webpack的打包体积?
- 压缩资源:使用 terser-plugin压缩js代码;使用css-minimizer-plugin 压缩css代码;使用image-webpack-plugin 压缩图片
- 使用tree-shaing,移除javaScript中未使用的代码
- 使用import 实现懒加载;使用split-chunks-plugin提取公共代码
- 按需加载组件库,避免全量引入大型库
十二、什么是tree-shaking?它是什么原理?
tree-shaking:移除js中未使用的代码技术
工作原理:
- 通过es 6静态分析识别 import/export
- 标记未被引用的代码
- 在压缩阶段移除这些被标记的代码
十三、谈谈对webpack的HMR (热更新)的理解?
首先热更新也叫热模块替换,它允许在运行时更新模块而不刷新整个页面
工作流程:
- 在webpack dev server(简称WDS) 启动时,建立浏览器和WDS的websocket连接;(webpack dev server 是 webpack提供的开发环境服务器,通过命令 npm run dev 触发启动)
- 监听到文件更新,重新编译;
- webpack 给浏览器发送消息
- 浏览器端通过jsonp获取到更新模块
- 替换旧的模块,执行相关回调
十四、webpack中的source-map 是什么?
source-map 是一种将编译、压缩后代码映射回原始源代码的技术,它配置在webpack.config.js中,通过devtool字段指定
大概分为以下几个类型
eval、eval-source-map 、cheep-module、source-map、hidden-source-map
其中evel-source-map 适合在开发环境,source-map 适合生产环境需精准调试,nosource-source-map 适合生产环境保护源码隐私
十五、webpack5的新特性?
- 持久化缓存,显著提高了构建的速度
- 内置了资源模块,不需要再使用file-loader、url-loader
- asset/resource:代替file-loader,适用大文件如图片、字体等
- asset/inline:代替 url-load 适用于小图标,svg
- asset/source:代替row-loader 适用于文本.txt文件
- asset:根据文件大小智能识别,自动选择是inline还是resource,
- tree-shaking优化增强:对于深层嵌套的模块,移除深层未使用的代码
- 模块联邦:适用于微前端;运行不同的webpack构建的应用在运行时共享模块
十六、模块联邦?是什么?(module-federetion)
模块联邦:它可以使多个webpack构建的应用程序在运行时共享代码
它是webpack5+的新特性
应用场景:
在微前端架构中 多个应用的公共共享库,运行时动态的加载远程模块
十七、webpack如何实现多页面应用?
在webpack.config.js中配置多个entry(入口),使用html-webpacl-plugin生成多个html文件
十八、使用webpack打包时内存溢出了,怎么解决?
- 在packge.json中,增加nodejs的内存限制
- 使用ceche-loader或者升级webpack5持续化缓存
- 减少loader的处理范围,配置exclude\include
- 使用DllPlugin 进行预编译 不常变动的模块
- 按需加载组件库,尽量避免全量引入大型库
十九、如何分析webpack的打包结果
在config.js中配置stats或者使用webpack-bundle-analyzer 进行可视化分析
从三个方面:
打包的体积:哪些文件大,是否有冗余代码
依赖关系:哪些模块被重复打包
构建性能:哪些插件或者loader耗时最长
相关文章:
关于webpack的知识点
一、什么是webpack?它的核心概念是什么? webpack是现代JavaScript应用程序的打包工具 它的核心概念包括: 入口输出loaderplugin(插件)模式模块依赖图 二、webPack与Grunt\Grulp有什么区别? 首先Grunt/Gulp是任务运行器,用来实现流…...
Linux系统中的 sudo 权限会导致环境变量失效。
标题为什么 sudo 会破坏 配置的环境变量? 权限切换:sudo 以 root 用户 身份执行命令,root 用户的环境变量和当前用户(user)的环境变量是隔离的。 环境变量丢失:nvm 依赖的 PATH、等环境变量是通过用户 She…...
目标分割模型优化自身参数都是梯度下降算法吗?
在计算机视觉的深度学习任务中,诸如 CNN、FCN、U-Net、DeepLab 系列模型已成为图像分类与图像分割任务的核心架构。它们在网络结构和任务上有所差异,但是否共享同一种优化机制?是否都使用梯度下降?优化过程中又有什么本质区别&…...
前端请求传参与后端匹配的接收方式Content-Type类型
文章目录 一、Content-Type简介二、Content-Type类型三、常⽤类型3.1. application/json:JSON数据格式3.2. application/x-www-form-urlencoded:普通表单格式(键值对)3.3. multipart/form-data:多部分表单格式…...
解决:VSCode C++ conan 安装第三方库后 头文件报错
文章目录 1 头文件include路径查找报错参考 1 头文件include路径查找报错 找到conan_toolchain.cmake中 INCLUDE_PATH list(PREPEND CMAKE_INCLUDE_PATH "/Users/hanliqiang/.conan2/p/b/fmte8c4f7a755477/p/include")生成C编译配置 CtrlShiftP 中选择C Edit Confi…...
(leetcode算法题)309. 买卖股票的最佳时机含冷冻期
按照题目要求,研究对象是最后一天结束后获得的最大利润 那么就可以把问题拆分成 第 1 天结束后获得的最大利润, 第 2 天结束后获得的最大利润, 第 i 天结束后获得的最大利润, 由于规则中强调不能同时参与多笔交易,…...
win10和win11系统修复工具各类故障解决
点赞关注一下哈: 在使用电脑时可能会遇到一些问题,通过上网查找解决方法费时费力,而有了这个小工具可以很方便的解决问题。有几十种解决方案,值得下载保存哦。 1、使用方法: 解压文件,双击文件夹内的exe文件…...
微硕WSP6949 MOS管在补水仪中的应用与市场分析
微硕WSP6949 MOS管在补水仪中的应用与市场分析 一、引言 补水仪作为一种常见的家用电器,其核心部件之一是驱动电路,而MOS管作为驱动电路中的关键元件,其性能直接影响到补水仪的运行效率和稳定性。微硕半导体推出的WSP6949 MOS管,…...
【通过Zadig给鼠标适配器安装驱动后,鼠标动不了,无法恢复的解决办法】
【通过Zadig给鼠标适配器安装驱动后,鼠标动不了,无法恢复的解决办法 问题产生缘由感谢这位大佬提供的解决办法解决办法 问题产生缘由 通过Zadig给鼠标适配器安装USB GAMING MOUSE这个驱动后,鼠标动不了,无法恢复(重启电脑,卸载鼠标驱动再重装也不可以), 不过还好,我用的是笔记…...
基本表单的实现即登录注册页面的实现
1.登录页面(opType.value0) 2.注册页面(opType.value1) 3.注意 el-form-item中的prop对应的是rules里面的key值 <el-form-itemlabel"邮箱"prop"email"label-width"100px"> </el-form-i…...
JVM 什么是逃逸分析?它有哪些优化手段?
JVM 逃逸分析 (Escape Analysis) 是一种编译器优化技术,主要由即时编译器 (JIT Compiler) 在运行时进行,用于分析对象的作用域,判断对象是否会逃逸出方法或线程。 什么是逃逸? 在 JVM 的上下文中,“逃逸” 指的是对象…...
Spring AI与通义千问的完美结合:构建智能对话应用
Spring AI是Spring生态系统中的新成员,它为开发人员提供了一套简单而强大的工具,用于集成各种AI大模型。本文将介绍如何使用Spring AI与阿里云通义千问大模型进行集成,构建智能对话应用,帮助你快速掌握AI应用开发的核心技能。 引言 随着人工智能技术的快速发展,越来越多的…...
CST仿真天线流程
基础操作指导 如何建模、设置边界条件、端口激励等。 材料属性设置、网格划分优化。 仿真参数配置(频域/时域仿真)。 常见仿真案例 天线设计(如微带天线、波导天线)。 微波器件(滤波器、功分器、耦合器࿰…...
Vue 组件化开发
引言 在当今的 Web 开发领域,构建一个功能丰富且用户体验良好的博客是许多开发者的目标。Vue.js 作为一款轻量级且高效的 JavaScript 框架,其组件化开发的特性为我们提供了一种优雅的解决方案。通过将博客拆分成多个独立的组件,我们可以提高…...
java + spring boot + mybatis 通过时间段进行查询
前端传来的只有日期内容,如:2025-04-17 需要在日期内容的基础上补充时间部分,代码示例: /*** 日志查询(分页查询)* param recordLogQueryDTO 查询参数对象* return 日志列表*/Overridepublic PageBean<…...
基于pycatia的CATIA自动化干涉检测系统开发全解析
引言 在智能制造时代,三维数模的干涉检测效率直接影响产品开发周期。本文基于Python的pycatia库,深入解析CATIA自动化干涉检测系统的开发要点与工业实践,结合达索系统最新技术趋势,为工程师提供一套高可靠性的二次开发方案。 一、…...
v-model进阶+ref+nextTick
一、v-model进阶 复习 v-model v-model: 双向数据绑定指令 数据 <-> 视图: 数据和视图相互影响, 因此被称为双向数据绑定指令 1> 数据变了, 视图也会跟着变 (数据驱动视图) 2> 视图变了, 数据也会跟着变 1. v-model 原理 v-model只是一个语法糖, 比较好用, …...
vscode+keil嵌入式软件开发全流程
vscodekeil嵌入式软件开发全流程 1 安装MinGW-w64 (1) MinGW-w64 是一个用于Windows操作系统的开发工具集,其包含了C语言编译器 GCC(GNU Compiler Collection),官网地址:https://www.mingw-w6…...
GitHub 从入门到精通完全指南(2025版)
以下是GitHub 从入门到精通完全指南,整合优质教程及官方文档,涵盖基础操作、协作开发、高级功能及实战技巧,助你快速掌握 GitHub 全流程。 一、GitHub 入门篇 1. 注册与配置 注册 GitHub 账号 访问 GitHub 官网,点击“Sign Up”填写邮箱、用户名、密码完成注册。建议绑定双…...
总结【过往部分项目经历一(计算机图形学方向)】
总结【过往部分项目经历】 1.蜂窝填充算法2.孔洞识别算法3.扫掠轮廓计算4.二维排料算法5.最大内接圆算法 1.蜂窝填充算法 介绍: 主要从二维六角网格基本算法出发,基于自定义数据结构和拓扑关系,从二维到三维进行拓展,六角网格->六棱柱-&g…...
Flask(补充内容)配置SSL 证书 实现 HTTPS 服务
没有加密的http服务,就像在裸泳,钻到水里便将你看个精光。数据在互联网上传输时,如果未经加密,随时可能被抓包软件抓住,里面的cookie、用户名、密码什么的,它会看得一清二楚,所以,只…...
js逆向分享
某验三代 这玩意大家应该都人手一份了,也没啥好分享的了,需要注意的是,一共五个请求,分别是: "https://apiv6.geetest.com/gettype.php “https://apiv6.geetest.com/get.php” “https://api.geevisit.com/a…...
【cocos creator 3.x】速通3d模型导入, 模型创建,阴影,材质使用,模型贴图绑定
1、右键创建平面,立方体 2、点击场景根节点,shadows勾选enabled3、点击灯光,shadow enabled勾选 4、点击模型,勾选接收阴影,投射阴影(按照需要勾选) 5、材质创建 6、选中节点,找…...
CentOS 中安装 vim
1. 使用 Yum 安装 Vim 如果您的系统可以正常访问互联网,并且已经配置好了正确的 Yum 源,可以直接运行以下命令安装 vim: sudo yum install vim -y 如果默认的 vim 包不可用,可以尝试安装增强版 vim-enhanced: sudo yu…...
安全可靠+操作简捷——安科瑞预付费电表的用户体验升级
安科瑞顾强 在现代化用电场景中,预付费模式凭借其高效性与便捷性,已成为商业、工业及住宅用电管理的优选方案。安科瑞电气推出的DDSY1352/DTSY1352系列预付费电能表,搭配智能管理平台,为用户提供从精准计量、智能控制到数据分析的…...
AI与物联网的深度融合:开启智能生活新时代
在当今数字化时代,人工智能(AI)和物联网(IoT)作为两大前沿技术,正在加速融合,为我们的生活和工作带来前所未有的变革。这种融合不仅提升了设备的智能化水平,还为各行各业带来了新的机…...
赛灵思 XCVU095-2FFVB2104E XilinxFPGA Virtex UltraScale
XCVU095-2FFVB2104I 是 Xilinx(现 AMD)Virtex UltraScale 系列中的高端 FPGA 器件,基于 20nm 工艺,提供卓越的逻辑密度和高速串行 I/O 能力,广泛应用于 400G 网络、ASIC 原型验证及大型数据中心互联 该器件集成 1 176…...
leetcode0212. 单词搜索 II - hard
1 题目:单词搜索 II 官方标定难度:难 给定一个 m x n 二维字符网格 board 和一个单词(字符串)列表 words, 返回所有二维网格上的单词 。 单词必须按照字母顺序,通过 相邻的单元格 内的字母构成ÿ…...
解决 VSCode 中 NVM 配置后无法识别 Node 和 NPM 的问题
在开发中,我们经常需要使用 Node.js 和 NPM 来管理 JavaScript 项目依赖,而 NVM(Node Version Manager)是开发者在本地环境中管理多个 Node.js 版本的得力工具。不过,有时候在 VSCode 中配置完 NVM 后,可能…...
67.评论日记
我的评论本身也就是一种回答 沈阳车展帖子灵异失踪,究竟是谁干的?_哔哩哔哩_bilibili 2025年4月17日17:32:10...
Vscode 插件开发
文章目录 1、使用vscode官方插件生成框架,下载脚手架2、使用脚手架初始化项目,这里我选择的是js3、生成的文件结构如下,重要的就是以下两个文件4、代码5、打包使用6、发布官网地址7、publisher ID undefined provided in the extension manif…...
数据结构(6)
实验步骤: 任务一: 编写算法实现带头结点单链表的就地逆置,即利用原带头结点单链表的结点空间把元素序列 a0,al,……,an-i 逆置为 an-1,……,al, a0 [程序参数设计] 定义了一个带头结点的单链表结构体,并提供了初始化、尾部插入、打印、就地…...
【ROS】恢复行为
【ROS】恢复行为 前言恢复行为(recovery_behavior)概述恢复行为的参数示例:recovery_behavior.yaml 配置文件参数说明与配置原则恢复行为模块的参数设置reset_recovery(重置行为:清除代价地图)参数冲突说明…...
HashMap中put方法的执行流程
在 Java 编程中,HashMap 是一种常用的集合类,它以键值对(Key-Value)的形式存储数据,它具有高效查找、插入和删除的优势。 一.HashMap底层数据结构 JDK 1.7:采用 数组 链表 的结构。JDK 1.8:优…...
基于深度学习并利用时间信息在X射线血管造影中进行冠状动脉血管分割|文献速递-深度学习医疗AI最新文献
Title 题目 Deep learning based coronary vessels segmentation in X-ray angiographyusing temporal information 基于深度学习并利用时间信息在X射线血管造影中进行冠状动脉血管分割 01 文献速递介绍 有创冠状动脉造影(ICA)在冠状动脉疾病&#…...
JVM详解(曼波脑图版)
(✪ω✪)ノ 好哒!曼波会用最可爱的比喻给小白同学讲解JVM,准备好开启奇妙旅程了吗?(๑˃̵ᴗ˂̵)و 📌 思维导图 ━━━━━━━━━━━━━━━━━━━ 🍎 JVM是什么?(苹果式比…...
深度理解指针之例题
文章目录 前言题目分析与讲解涉及知识点 前言 对指针有一定了解后,讲一下一道初学者的易错题 题目分析与讲解 先定义一个数组跟一个指针变量 然后把数组名赋值给指针变量————也就是把首地址传到pulPtr中 重点是分析这一句: *(pulPtr…...
Electricity Market Optimization(VI) - 机组组合问题的 GAMS 求解
根据之前的博客,我们考虑机组的启动成本只讨论考虑以下几种约束的机组组合问题: 功率平衡约束火电机组启停约束和爬坡约束备用容量约束 min ∑ t 1 T ( C t g e n C t u c C t curt ) s.t. C t g e n ∑ i ∈ [ G ] c i ( p i , t c ) C t u c …...
【Leetcode 每日一题】2176. 统计数组中相等且可以被整除的数对
问题背景 给你一个下标从 0 0 0 开始长度为 n n n 的整数数组 n u m s nums nums 和一个整数 k k k,请你返回满足 0 ≤ i < j < n 0 \le i < j < n 0≤i<j<n, n u m s [ i ] n u m s [ j ] nums[i] nums[j] nums[i]nums[j] 且…...
赛灵思 XCVU3P‑2FFVC1517I XilinxFPGA Virtex UltraScale+
XCVU3P‑2FFVC1517I AMD Xilinx Virtex UltraScale 系列中的高端 FPGA,基于 TSMC 16 nm FinFET 工艺及第三代 3D IC 堆栈互连技术(SSI),旨在为数据中心互连、高性能计算、网络加速和信号处理等苛刻应用提供领先的性能‑功耗比。…...
Rust 与 JavaScript 的 WebAssembly 互操作指南
1. Rust 中导入和导出 JS 函数 导入 JS 函数 Rust 代码中可以通过 extern 块导入 JavaScript 函数: #[link(wasm_import_module "mod")] // 指定 JS 模块名 extern { fn foo(); // 声明导入的 JS 函数 }如果没有指定 wasm_import_module,默…...
2025年特种设备安全管理 A 证考试全解析
对于想要获取特种设备安全管理 A 证的人员来说,了解考试的具体内容与形式是备考的关键。下面将为大家全面解析特种设备安全管理 A 证考试,助力大家顺利备考,成功取证。 特种设备安全管理 A 证考试内容丰富,涵盖多个重要领域。特种…...
TOA与AOA联合定位的高精度算法,三维、4个基站的情况,MATLAB例程,附完整代码
本代码实现了三维空间内目标的高精度定位,结合到达角(AOA) 和到达时间(TOA) 两种测量方法,通过4个基站的协同观测,利用最小二乘法解算目标位置。代码支持噪声模拟、误差分析及三维可视化,适用于无人机导航、室内定位等场景。订阅专栏后可获得完整代码 文章目录 运行结果…...
java 设计模式之策略模式
简介 策略模式:策略模式可以定制目标对象的行为,它尅通过传入不同的策略实现,来配置目标对象的行为。使用策略模式,就是为了定制目标对象在某个关键点的行为。 策略模式中的角色: 上下文类:持有一个策略…...
BH1750光照传感器---附代码
目录 BH1750简介BH1750指令集BH1750工作流程 BH1750简介 VCC-->电源正; ADDR-->地址端口; GND-->电源负; PA5-->SDA-->I2C数据线; PA3-->SCL-->I2C时钟线; DVI-->I2C端口参考电压;…...
docker harbor私有仓库登录报错
docker harbor私有仓库登录报错如下: [rootsrv-1 ~]# docker login -u user1 -p pwd1 harbor.chinacloudapi.cn WARNING! Using --password via the CLI is insecure. Use --password-stdin. Error response from daemon: Get "https://harbor.chinacloudapi.…...
浔川AI翻译v7.0更新预告
亲爱的浔川AI翻译用户: 感谢您一直以来的支持!浔川AI翻译自推出以来,已迭代6个版本,其中**v2.0和v4.0因技术问题(翻译结果显示异常、注册失败、密码找回功能失效等)**被迫下架。我们深知这些问题影响了您…...
Linux网络编程实战:从字节序到UDP协议栈的深度解析与开发指南
网路通信的三大要素:协议,端口和IP 知识点1【字节序】 多字节在主机中的存放数据 把多字节看成一个整体存储的顺序。 为什么我们在文件中没有这个概念呢? 因为文件是字节流(流指针),流是以一个字节为操…...
Java基础知识面试题(已整理Java面试宝典pdf版)
什么是Java Java是一门面向对象编程语言,不仅吸收了C语言的各种优点,还摒弃了C里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论…...
速盾:高防CDN访问多了会影响源站吗?
在当今数字化时代,内容分发网络(CDN)已经成为保障网站性能和用户体验的重要工具。特别是高防CDN,它不仅能够加速内容传输,还能有效抵御各种类型的网络攻击,确保业务的连续性和稳定性。然而,一些…...