webpack 4 源码主流程分析(三):编译前的准备

Compiler 简述

  • webpack/lib/Compiler.js 该文件是 webpack 的核心, Compiler 类定义了整个构建的流程,而后文的 Compilation 类则负责如何具体去构建;
  • new Compiler 执行 constructor,首先扩展了 Tapable,在 constructor 里定义了一堆钩子 done,beforeRun,run,emit 等等;
  • 然后注册了this._pluginCompat.tap("Compiler"),这个用来兼容之前的老版 webpackplugin 的钩子,触发时机在tapable/lib/Tapable.js里调用plugin 的时候;
  • Compiler 类的 run 即为整个打包的主流程函数;

封装 FS

继续执行 webpack.js,执行:

1
2
3
new NodeEnvironmentPlugin({
infrastructureLogging: options.infrastructureLogging,
}).apply(compiler);

该类主要对文件系统做了一些封装,包括输入,输出,缓存,监听等等,这些扩展后的方法全部挂载在 compiler 对象下。

注册 plugins

项目配置的 plugins

然后对自己 config 文件里的 plugins 进行了注册:

1
2
3
4
5
6
7
8
9
if (options.plugins && Array.isArray(options.plugins)) {
for (const plugin of options.plugins) {
if (typeof plugin === 'function') {
plugin.call(compiler, compiler);
} else {
plugin.apply(compiler);
}
}
}

在这里,会把 compiler 实例传进去供 plugin 使用,compiler 包含整个构建流程的全部钩子,通过它可以把控整个 webpack 构建周期。

掌握流程里各对象(如 compilercompilation)的事件钩子触发的时机,就是掌握如何写一个插件的关键。如何写一个 webpack 插件?

接着触发了 compilerhooks: environment,afterEnvironment,然后执行:

1
compiler.options = new WebpackOptionsApply().process(options, compiler);

项目默认的 plugins

WebpackOptionsApply 类的 process 除了把配置里的一些属性添加到 compiler 对象下,更主要的是根据 options 的配置不同,注册激活一些默认自带的插件和 resolverFactory.hooks,大部分插件的作用是往 compiler.hooks:compilation,thisCompilation 里注册一些事件(此时该钩子已经获取到 normalModuleFactory 等参数),如:

1
2
3
4
5
new JavascriptModulesPlugin().apply(compiler); //给normalModuleFactory的js模块提供Parser、JavascriptGenerator对象 ,并给seal阶段的template提供renderManifest数组(包含render方法)
new JsonModulesPlugin().apply(compiler); //给normalModuleFactory的json模块提供Parser、JavascriptGenerator对象
new WebAssemblyModulesPlugin({
mangleImports: options.optimization.mangleWasmImports,
}).apply(compiler); // 同理,webassembly模块
1
2
new EntryOptionPlugin().apply(compiler);
compiler.hooks.entryOption.call(options.context, options.entry); //创建多入口还是单入口 SingleEntryPlugin | MultiEntryPlugin,两者均会在 apply 方法里注册 Compiler.hooks:compilation, make

插件处理完毕后,触发 compiler.hooks: afterPlugins

注册 resolverFactory.hooks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
compiler.resolverFactory.hooks.resolveOptions.for('normal').tap('WebpackOptionsApply', (resolveOptions) => {
return Object.assign(
{
fileSystem: compiler.inputFileSystem,
},
cachedCleverMerge(options.resolve, resolveOptions) //配置项 options.resolve
);
});
compiler.resolverFactory.hooks.resolveOptions.for('context').tap('WebpackOptionsApply', (resolveOptions) => {
return Object.assign(
{
fileSystem: compiler.inputFileSystem,
resolveToContext: true,
},
cachedCleverMerge(options.resolve, resolveOptions) //配置项 options.resolve
);
});
compiler.resolverFactory.hooks.resolveOptions.for('loader').tap('WebpackOptionsApply', (resolveOptions) => {
return Object.assign(
{
fileSystem: compiler.inputFileSystem,
},
cachedCleverMerge(options.resolveLoader, resolveOptions) //配置项 options.resolveLoader
);
});

然后注册 compiler.resolverFactory.hooks: resolveOptions for (normal/context/loader),目的是为 Factory.createResolver 提供默认的参数对象(含有相关的 resolve 项目配置项)。

注册完成后,触发 compiler.hooks: afterResolvers,到此 compiler 初始化完毕。

回到 cli.js

回到cli.js,处理配置项 progressinfoVerbosity,然后判断 options 里是否有 watch,有则走 compiler.watch,无则走 compiler.run,这里我们走compiler.run,进入 webpack 核心构建流程!

本章小结

  1. 实例化了 Compiler,它扩展于Tapable,是 webapck 的核心;
  2. 封装了输入输出等方法 FS ,然后注册了 plugins,包括项目配置的和项目默认的;
  3. 注册 resolverFactory.hooks 用于 Factory.createResolver 方法提供参数对象;
  4. 最后根据配置是否有 watch 来决定程序走向。
---- 本文结束,感谢您的阅读 ----