二、webpack打包原理

webpack之打包原理分析

• 本篇主要讲解webpack打包过程中原理，详细分析打包过程发生了什么事儿，是怎样实现打包的。

webpack的编译过程

1. 根据入口文件（默认是src目录下的index.js文件）读取项目所需的依赖文件，然后创建一个chunk
2. 根据入口文件创建的chunk至少有两个属性，一个是name,一个是ID。
3. chunk的主要功能是------>根据文件配置、模块内容等生成资源文件
   • 第一步：根据入口文件读取模块文件，
   • 第二步：检查是否读取过该模块文件，没有就继续下一步，
   • 第三步：读取文件内容
   • 第四步：根据AST抽象语法树读取模块依赖的所有文件路径，是一个树形的结构的结果
   • 第五步：遍历AST树形结构，保存到dependencies中。这是一个数组，保存的是AST树形结构中的所有依赖
   • 第六步：替换依赖函数，功能就是读取模块中的具体内容，以字符串的形式读取，且把模块引入语法加上前缀
   • 第七步： 保存转换后的代码，以数组的形式保存，里面的每一个元素都是对象，形式如下
     • 模块ID( 一般就是模块依赖的路径 ): 转换后的代码( 模块的具体内容，以字符串的形式读取 )