https://vip.yidengfe.com/ques/info/357#text-1-5-0
webpack本质是一种事件流机制，核心模块：tapable Hooks => compiler编译 => compilation(创建bundle)

介绍webpack及构建流程

https://developer.aliyun.com/article/61047
https://github.com/youngwind/blog/issues/99
https://github.com/youngwind/blog/issues/100

HF|webpack构建流程 - 图1

image.png
image.png

image.png

compiler

compiler对象代表完整的webpack环境配置。

compiler钩子函数

https://webpack.docschina.org/api/compiler-hooks/

（事件）钩子函数 触发时机 参数 类型
run 开始读取 records 之前，钩入(hook into) compiler compiler AsyncSeriesHook
compile 一个新的编译(compilation)创建之后，钩入(hook into) compiler compilationParams SyncHook
compilation 编译(compilation)创建之后，执行插件 compilation SyncHook
—-分割
make compilation AsyncParallelHook
—-分割
emit 生成资源到 output 目录之前 compilation AsyncSeriesHook
done 编译(compilation)完成 stats AsyncSeriesHook

compilation

compilation对象代表依次资源版本构建。

compilation钩子函数

https://webpack.docschina.org/api/compilation-hooks/

钩子函数 触发时机 参数 类型
buildModule 在模块构建开始之前触发 module SyncHook
seal 编译(compilation)停止接收新模块时触发 SyncHook

拆分

识别reuqire.ensure后进行拆分
多个module构建出一个chunk

如何将多个符合CommonJS规范的模块打包成一个JS文件？

模块依赖和模块查找， 生成一个依赖依赖关系对象。

源码分析

image.png