写作不易，Star是最大鼓励，感觉写的不错的可以给个Star⭐，请多多指教。本博客的Github地址。
webpack的编译都按照下面的钩子调用顺序执行：
unseal: new SyncHook([]),
/** @type {SyncHook} */
seal: new SyncHook([]), // 优化相关的钩子
1
2
3
2
3
emit: new AsyncSeriesHook(["compilation"]) // 发射文件钩子
1
WebpackOptionsApply
WebpackOptionsApply作用是：将所有的配置options参数转换成webpack内部插件。
// 如果设置了library，则会使用LibraryTemplatePlugin插件
if (options.output.library || options.output.libraryTarget !== "var") {
const LibraryTemplatePlugin = require("./LibraryTemplatePlugin");
new LibraryTemplatePlugin(
options.output.library,
options.output.libraryTarget,
options.output.umdNamedDefine,
options.output.auxiliaryComment || "",
options.output.libraryExport
).apply(compiler);
}
// 如果设置了externals，则会使用ExternalsPlugin插件
if (options.externals) {
ExternalsPlugin = require("./ExternalsPlugin");
new ExternalsPlugin(
options.output.libraryTarget,
options.externals
).apply(compiler);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Compiler hooks
流程相关：
- (before-)run
- (before-/after-)compile
- make
- (after-)emit
- done：整个构建完成后触发
监听相关：
- watch-run
- watch-close
Compliation
Compiler调用Compliation生命周期方法。