简单手撕一下webpack吧

webpack的打包流程

1. 收集参数，构建Compiler对象
2. 挂载插件
3. 调用compiler.run方法开始构建
4. 创建compilation对象，并调用build方法开始编译
5. 整理入口文件
6. 从入口文件开始编译模块
7. 找到匹配的loader进行编译
8. 抽象语法树操作，收集该模块所依赖的模块，把其中的依赖模块相对路径解析
9. 抽象语法树生成回源代码
10. 对依赖模块进行编译
11. 根据入口文件模块生成chunk
12. 根据chunk整理输出资源列表assets
13. 拿到输出资源列表assets之后，开始写入文件系统

功能

模块化：command.js

hooks实现：run done emit

实现

主要是Compiler和Compilation的实现，Compiler主要负责生成Compilation对象，Compilation对象主要负责匹配loader进行编译，编译好的modules、chunks、assets通过回调交回给Compiler对象进行文件系统的写入，期间的生命周期通过tapable库进行触发。

其中好多回调函数，代码的执行顺序非常不好截图，建议还是直接去看源码，跟着注释的序号去看，对着上面的流程序号就很好看明白了。

起步

1. 收集参数，构建Compiler对象。
2. 挂载插件，调用插件的apply方法，并传入compiler对象。
3. 调用compiler.run方法开始构建。

Compiler.js

1. 创建compilation对象，并调用build方法开始编译
2. 拿到输出资源列表assets之后，开始写入文件系统

首先是hooks，用回tapable库。

实现compiler.run方法，触发run hook。

实现compiler.compile方法，compile方法留了一个callback回调函数，并调用compilation的build方法，开始编译。

Compilation.js

设三个存放结果的数据结构，分别是：

1. modules，存放单个文件编译结果
2. chunks，存放单个chunk（入口文件及其依赖模块）编译结果
3. assets，输出文件结果

build方法实现

1. 整理入口文件
2. 从入口文件开始编译模块
3. 根据入口文件模块生成chunk
4. 根据chunk整理输出资源列表assets

buildModule方法实现

1. 找到匹配的loader进行编译（return与callback方式）
2. 抽象语法树操作，收集该模块所依赖的模块，把其中的依赖模块相对路径解析
3. 抽象语法树生成回源代码
4. 对依赖模块进行编译

源码地址

webpack-handtear: 自己写个webpack玩玩 (gitee.com)