webpack打包流程

admin 29 0

Webpack的打包流程主要包括以下步骤:

1. **初始化参数**:从配置文件和Shell语句中读取与合并参数,得出最终的参数。

2. **开始编译**:用上一步得到的参数初始化Compiler对象,加载所有配置的插件,执行对象的run方法开始执行编译。

3. **确定入口**:根据配置中的entry找出所有的入口文件,Webpack会从入口文件开始递归地解析项目中的所有依赖关系。

4. **编译模块**:从入口文件出发,调用所有配置的Loader对模块进行翻译,再找出该模块依赖的模块,然后递归本步骤直到所有入口依赖的文件都经过了本步骤的处理,Webpack使用不同的加载器(loader)来解析不同类型的文件。

5. **完成模块编译**:在经过第4步使用Loader翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系,即AST树,得到关系依赖图。

6. **输出资源**:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk(自执行函数,参数是本chunk的所有依赖,按照依赖的顺序执行),再把每个Chunk转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。

以上步骤完成后,Webpack会将所有模块合并成一个或多个包(bundle),完成整个打包过程。