lhlGitHub / trisome

前端大厂进攻学习资料库
21 stars 1 forks source link

说说Webpack打包流程 #36

Open lhlGitHub opened 2 years ago

CheeseLeee commented 2 years ago

1、启动命令参数和配置信息合并,生成complier对象,注册所有插件,执行run方法 2、从入口递归查找依赖,有配置loader则用loader解析,查到没有,生成AST 3、根据分包配置输出chunck 4、全流程会广播生命后期hook,插件会在特定时间注册回调。

Moannas commented 2 years ago

Webpack首先会把配置参数和命令行的参数及默认参数合并,并初始化需要使用的插件和配置插件等执行环境所需要的参数;初始化完成后会调用Compiler的run来真正启动webpack编译构建过程,webpack的构建流程包括compile、make、build、seal、emit阶段,执行完这些阶段就完成了构建过程。这其实就是我们上面所讲到的。

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

开始编译: 根据我们的webpack配置注册好对应的插件调用 compile.run 进入编译阶段,在编译的第一阶段是 compilation,他会注册好不同类型的module对应的 factory,不然后面碰到了就不知道如何处理了。

编译模块: 进入 make 阶段,会从 entry 开始进行两步操作:第一步是调用 loaders 对模块的原始代码进行编译,转换成标准的JS代码, 第二步是调用 acorn 对JS代码进行语法分析,然后收集其中的依赖关系。每个模块都会记录自己的依赖关系,从而形成一颗关系树。

输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。

输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。