webpack打包过程
初始化编译配置
使用第三方库yargs将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象
根据模块创建chunk
根据入口文件来创建一个chunk,可能会有多个chunk,每个chunk有两个属性:
name:默认为main
id:唯一编号,开发环境和name相同,生产环境是一个数字,从0开始
构建所有依赖模块
从入口文件开始,每次遇到一个模块都做下面的事情:
- 在模块记录表中查询有没有加载过,如果加载过,则跳出,直接不加载没有加载过,则进入2
- 读取文件内容
- 通过语法分析生成AST抽象语法树
- 记录依赖,将该文件依赖的文件放入dependencies数组中去。
- 替换依赖函数,在require的那些语句之前加上webpack前缀,得到转换后的代码。
- 将模块id和转换后的代码放入模块记录表
最终的目的
形成一个列表--模块记录表
生成文件列表
1.通过模块记录表生成资源列表,即最终要生成的文件名和文件内容,可能会存在多个文件(比如map),这两个文件是同一个chunk生成。
2.根据生成的文件,将文件内容做一次字符串拼接,然后取哈希值,得到chunk hash,chunk hash可以标识文件有没有变。
合并与输出
合并 将所有的chunk资源列表合并起来生成一个总的资源列表,也生成一个总的hash。
输出 将最终的资源列表生成输出文件
下图来自抖音渡一: