• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

webpack进阶-工作原理

互联网 diligentman 1周前 (02-20) 6次浏览

webpack虽然使用简单,但是它对于使用者就是一个黑盒。

鲁迅说:如果你对一个事物原理不了解,那么你不可能熟练驾驭它。

webpack进阶-工作原理

如果有不熟悉webpack基本使用的小伙伴们,可以查看我之前的分享,可以狠狠的点击这里:https://segmentfault.com/a/11…

一. 流程概览

  1. 校验options参数是否合法,options参数和命令行中的参数合并
  2. 实例化Compiler对象,初始化所有配置插件 (compiler类继承自Tapable),挂载hooks。
  3. 依次调用plugin的 apply 方法,让插件可以监听后续的所有事件节点。
  4. 执行compiler.run方法,此方法实际上实例化Tapable中的AsyncSeriesHook([‘compiler’])
  5. 找到主入口,入口可能会有多个,这个取决config文件是否配置多个entry
  6. 创建compilation对象,执行对应的回调。 包括: 进入每一个entry -> 使用loader进行编译 -> acorn解析AST -> 递归执行所有文件 -> 全部执行完成后执行compilation seal方法,对每个chunk进行整理,优化,封装。
  7. Tapable广播emit事件,所有文件编译完成并且输出,这个时候还在内存中,可以获取所有文件信息和chunk的各种信息
  8. 文件写入磁盘完成,Tapable广播afterEmit事件
  9. 完成 编译,Tapable广播Done事件

二. Tapable

我们可以把webpack理解为一条生产线,需要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的,多个流程之间会存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。

我们的插件就像一个插入到生产线中的一个功能,在特定的时机对生产线上的资源会做处理。webpack它是通过 Tapable来组织这条复杂的生产线的。

webpack在运行的过程中会广播事件,插件只需要关心监听它的事件,就能加入到这条生产线中。然后会执行相关的操作。webpack的事件流机制它能保证了插件的有序性,使整个系统的扩展性好。事件流机制使用了观察者模式来实现的。

总的来说,tapable暴露了3种hooks:

  • tap (同步钩子)
  • tapAsync (异步钩子)
  • tapPromise(异步promise钩子)

常用事件流如下:

事件名称 说明
entryOption 初始化options
run 开始编译
make 从entry开始,递归分析依赖,并对依赖进行build
build-module 使用loader加载文件,并build模块
normal-module-loader loader的文件进行acorn编译,生成抽象语法树AST
program 开始对AST进行遍历,当遇到require时触发call require事件
seal 所有依赖build完成,开始对chunk进行优化(抽取公共模块、加hash等)
optimize-chunk-assets 压缩代码
emit 把各个chunk输出到结果文件

三. compiler

compiler对象 是Compiler类的实例对象, 而Compiler类继承自Tapable,webpack在启动时,会实例化一次compiler,后续每次文件的改动,都会创建一个compilation对象。

Compiler 负责文件监听和启动编译。Compiler 实例中包含了完整的 Webpack 配置,全局只有一个 Compiler 实例

compiler对象,大致数据结构如下:

webpack进阶-工作原理

我们在开发自定义插件时,webpack会调用插件类的apply方法,传入compiler,我们就可以在tapable广播事件流时,自定义做一些事件啦~

掌握webpack的工作原理,对我们后续开发自己的loader, plugin有极大的好处。
后面我将分享,如何开发自己的plugin。
码字不易,多多关注~😙


程序员灯塔
转载请注明原文链接:webpack进阶-工作原理
喜欢 (0)