webpack 构建过程

[leslie1943]

webpack 构建过程

• 初始化参数: 从配置文件和shell语句中读取与合并参数, 得出最终的参数
• 开始编译: 用上一步得到的参数初始化 Compiler对象, 加载所有配置的插件,执行对象的run方法执行编译
• 确定入口: 根据配置中的entry找出所有的入口文件
• 编译模块: 从入口文件触发,调用所有配置的loader对模块进行编译,再找出该模块依赖的模块, 再递归本步骤直到所有入口依赖的文件都经过了loader的处理
• 完成模块编译: 在经过第4步使用loader翻译完成所有模块后,得到每个模块被翻译后的最终内容以及他们之间的依赖关系
• 输出资源: 根据入口和模块之间的依赖关系, 组装成一个个包含多个模块的 Chunk, 再把每个Chunk转换成一个单独的文件加入到输出列表,这步是修改输出内容的最终机会
• 输出完成: 再确定好输出内容后,根据配置确定输出的路径和文件名, 把文件内容写入到文件系统
• 以上过程, Webpack会在特定的时间点运行不同的钩子函数中定义的插件, 改变 Webpack的运行结果

过程总结

• 【初始化】: 启动构建, 读取与合并配置参数, 加载 Plugin, 实例化 Compiler
• 【编译】: 从 Entry 出发, 针对每个 Module 串行调用对应的 Loader 去翻译文件的内容, 再找到该 Module 依赖的 Module, 递归地进行编译处理
• 【输出】: 将编译后的 Module 组合成 Chunk, 将 Chunk 转换成文件, 输出到文件系统中