前端工程化之----webpack

117 阅读2分钟

webpack打包过程

初始化编译配置

使用第三方库yargs将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象

根据模块创建chunk

根据入口文件来创建一个chunk,可能会有多个chunk,每个chunk有两个属性:

    name:默认为main
    id:唯一编号,开发环境和name相同,生产环境是一个数字,从0开始

构建所有依赖模块

从入口文件开始,每次遇到一个模块都做下面的事情:

  1. 在模块记录表中查询有没有加载过,如果加载过,则跳出,直接不加载没有加载过,则进入2
  2. 读取文件内容
  3. 通过语法分析生成AST抽象语法树
  4. 记录依赖,将该文件依赖的文件放入dependencies数组中去。
  5. 替换依赖函数,在require的那些语句之前加上webpack前缀,得到转换后的代码。
  6. 将模块id和转换后的代码放入模块记录表

最终的目的

    形成一个列表--模块记录表

生成文件列表

1.通过模块记录表生成资源列表,即最终要生成的文件名和文件内容,可能会存在多个文件(比如map),这两个文件是同一个chunk生成。

2.根据生成的文件,将文件内容做一次字符串拼接,然后取哈希值,得到chunk hash,chunk hash可以标识文件有没有变。

合并与输出

合并 将所有的chunk资源列表合并起来生成一个总的资源列表,也生成一个总的hash。

输出 将最终的资源列表生成输出文件

下图来自抖音渡一: image.png