Webpack 执行过程

执行 webpack() 函数，根据传进来的配置参数，生成编译器实例 compiler, 然后处理参数，执行 new WebpackOptionsApply().process(compiler, options) 根据参数加载不同的内部插件。如果有回调，根据是否有 watch 模式来执行 compiler.watch(callback) 还是 compiler.run(callback)。

Compiler 的执行过程

compiler.run(callback) 执行逻辑比较复杂, 大概如下：

1.readRecords 读取构建文件，用于分包缓存优化；

2.compile 的主要构建过程:

• (1) newCompilationParams 创建 NormalModule 和 ContextModule 的工厂实例，用于创建后续模块实例。

• (2) newCompilation：创建编译过程 Compilation 实例，传入上一步的两个工厂实例作为参数。

• (3) compiler.hooks.make.callAsync：触发 make 的 Hook，执行所有监听 make 的插件。

• (4) compilation.finish：编译过程实例的 finish 方法，触发相应的 Hook 并报告构建模块的错误和警告。

• (5) compilation.seal：编译过程的 seal 方法。

3.emitAssets：调用 compilation.getAssets()，将产物内容写入输出文件中。

4.emitRecords：对应第一步的 readRecords，用于写入构建记录，在未设置 recordsPath 时直接返回。

Compilation

从外部调用两个方法：

1.addEntry：从 entry 开始递归添加和构建模块。

2.seal：冻结模块，进行一系列优化，以及触发各优化阶段的 Hooks。

总结

1.创建 Compiler 编译器实例

2.根据webpack中配置的参数加载参数中的插件，以及内置的插件。

3.执行编译流程：创建编译过程中的 Compilation 实例，从入口递归添加与构建模块，模块构建完成后冻结模块，并进行优化。

4.构建与优化过程结束后提交这些结果，将结果写入到文件中。