《玩转webpack》学习笔记之day15第六章61-65讲

迷路的小兰
60 阅读2分钟

61讲 Tapable插件架构与Hooks设计

Webpack本质

Webpack可以将其理解是一种基于事件流的编程范例，一系列的插件运行

image.png

Tapable是什么？

Tapable是一个类似于Node.js的EventEmitter的库，主要是控制钩子函数的发布与订阅，控制着webpack插件系统。

Tapable库暴露了很多Hook（钩子）类，为插件提供挂载钩子

image.png

Tapable hooks类型

image.png

Tapable 的使用-new Hook新建钩子

Tapable暴露出来的都是类方法，new一个类方法获得我们需要的钩子。

class接受数组参数options，非必传。类方法会根据传参，接受同样数量的参数。

const hook1 = new SyncHook({"arg1","arg2","arg3"})

Tapable 的使用-钩子的绑定与执行

Tabpack提供了同步&异步绑定钩子的方法，并且他们都有绑定事件和执行事件对应的方法。

image.png

Tapable 的使用-hook基本用法示例

image.png

Tapable 的使用-实际例子演示

image.png

image.png

62讲 Tapable是如何和webpack进行关联起来的？

image.png

插件有个apply方法，接受参数，参数是一个对象

image.png

内部插件注入进去

image.png

模拟Compiler.js

image.png

同步hook：

image.png

异步hook：

image.png

插件my-plugin.js

image.png 监听hook：

image.png

模拟插件执行

image.png

63讲 Webpack流程篇：准备阶段

Webpack流程篇

image.png

准备阶段看这个： image.png

image.png

image.png

WebpackOptionsApply

image.png

image.png

64讲 Webpack流程篇：模块构建和chunk生成阶段（打包）

Compiler hooks

image.png

从流程.make讲

image.png

image.png

Compilation

image.png

seal 内容输出，资源生成优化

image.png

ModuleFactory

image.png

Module

image.png

NormalModule

image.png

关注doBuild 和 Module.build代码逻辑，result = parser.parse

result 存放到Compilation的 this.Module = []

Compilation hooks

image.png

Chunk生成算法

  1. webpack先将entry中对应module都生成一个新的chunk
  2. 遍历module的依赖列表，将依赖的module也加入到chunk中
  3. 如果一个依赖module是动态引入的模块，那么就会根据这个module创建一个新的chunk，继续遍历依赖
  4. 重复上面过程，直到得到所有chunks

65讲 Webpack流程篇：文件生成（输出到磁盘）

seal和emit阶段

seal阶段会createHash，然后进入createModuleAssets，放到this.assets[]中保存

进入emit阶段，在compile.js中，获取getPath，mkdir，输入文件

modifyHash根据传入Hash进行修改

参考

程柳峰 《极客时间》 《玩转webpack》 第六章 61-65讲

avatar
文章
阅读
粉丝