![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 85
你才是向阳花
这个作者很懒,什么都没留下…
展开
-
webpack 打包优化 - splitChunks
webpack5 默认情况下只对异步模块做打包优化,额外的打包必须满足 4 个条件(webpack 的默认配置,可修改)。根据需求可调整为只对初始模块做打包优化,或者初始和异步模块一起优化。同时可配置自己的打包规则。简而言之:chunks 控制打包作用范围,其他控制打包规则。webpack5 的 splitChunks 功能是比较强大的,不过推荐还是使用默认模式,或者提取一下第三方库。原创 2024-04-19 21:17:19 · 2374 阅读 · 0 评论 -
webpack为什么要使用loader,如何手写loader
webpack是一个打包工具,即webpack会将一切文件视为模块,但是webpack在打包的时候只是认识JS文件或者JSON文件,并不认识CSS文件,png图片等,如果想让webpack能够在打包的时候识别其他文件,就必须要使用loader,即loader的作用就是让webpack拥有可以加载和了解除JS文件以外的其他文件。原创 2024-03-24 21:36:01 · 494 阅读 · 0 评论 -
webpack原理之-打包流程&热更新HMR
plugin即为插件,是一个扩展器,丰富webpack本身,增强功能 ,针对的是在loader结束之后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,监听webpack打包过程中的某些节点,执行广泛的任务。webpack 在编译代码过程中,会触发一系列 Tapable 钩子事件,插件所做的,就是找到相应的钩子,往上面挂上自己的任务,也就是注册事件,这样,当 webpack 构建的时候,插件注册的事件就会随着钩子的触发而执行了。loader即文件加载器:用来预处理文件。原创 2024-03-24 21:11:57 · 1648 阅读 · 0 评论 -
AST抽象语法树&webpack逻辑解析
1. parsing:解析过程,词法分析、语法分析、构建AST;1) 词法分析:读取代码字符串,识别每一个单词及其种类,移除空格注释,按照预定规则合并成一个个的标识(token),产出一个token数组(令牌)2) 语法分析:读取令牌流,在语法约束下生成树形的中间表示,便于描述逻辑结构,给出了令牌流的结构表示,同时验证语法,如果有错误抛出语法错误。原创 2024-03-24 12:53:10 · 850 阅读 · 0 评论