[webpack] [2021-01-07] 介绍下webpack的整个生命周期？

[jeddygong]

[jeddygong]

Webpack 的运行流程是一个串行的过程，从启动到结束会以此执行以下流程

• 初始化参数 从配置文件和Shell语句中读取与合并参数，得出最终的参数；
• 开始编译 用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译；
• 确定入口 根据配置中的entry 找出所有的入口文件
• 编译模板 从入口文件触出发，掉用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
• 完成模块编译 在经过第四步使用Loader翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
• 输出资源 根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个Chunk转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
• 输出完成 再确定好输出内容后，根据配置稳定输出的路径和文件名，把文件内容写入到文件系统；

在以上过程中，Webpack会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用Webpack提供的API改变Webpack的运行结果。