前端工程化9：Webpack构建流程分析，Webpack5源码解读
站长
· 阅读数 15
Webpack构建流程
webpack 核心构建流程总结
webpack5 和 webpack4 源码不同，本文参考 webpack5.38.1 源码
1. 核心构建流程总结
1.1 启动 webpack
1.1.1 执行 node_modules/.bin/webpack.cmd
1.1.2 执行 node_modules/webpack/bin/webpack.js1.2 启动 webpack-cli
1.2.1 执行 node_modules/webpack-cli/bin/cli.js
1.2.2 检查 webpack 是否安装，没有则提示安装
1.2.3 调用 runCLI() 解析命令行参数，创建编译对象；执行顺序：runCLI() => cli.run() => cli.buildCommand()1.3 创建编译对象 compiler
1.3.1 调用 cli.buildCommand() => cli.createCompiler() => webpack()1.4 实例化编译对象 compiler，预埋核心钩子
1.4.1 挂载Node文件读写能力到 compiler
1.4.2 挂载所有插件到 compiler
1.4.3 挂载默认配置到 compiler
1.4.4 启动核心钩子的监听：compilation、make1.5 执行方法 compiler.run()，启动编译
1.5.1 触发 beforeRun 钩子
1.5.2 触发 run 钩子
- 1.5.2.1 主要功能是 触发 compile、make 钩子，make 完成后处理回调
- 1.5.2.2 make 结束后，通过 onCompiled 写入代码到文件输出到 dist 目录1.6 执行方法 compiler.compile()，完成编译，输出文件
1.6.1 触发钩子 beforeCompile
1.6.2 触发钩子 compile
1.6.3 触发钩子 thisCompilation、compilation
1.6.4 触发钩子 make（核心钩子）
- 1.6.4.1 根据入口等配置，创建模块
- 1.6.4.2 实现编译功能：转换代码为ast语法树，再将其转换回code代码
- 1.6.4.3 对chunk进行处理
1.6.5 触发钩子 finishMake
1.6.6 触发钩子 afterCompile2. 核心钩子的监听
- beforeRun => 未知
- run => 未知
- beforeCompile => 未知
- compile => 未知
- thisCompilation => 未知
- compilation => new WebpackOptionsApply() 中启动监听 => 作用：让 compilation 具备创建模块的能力
- make => new WebpackOptionsApply() 中启动监听 => 作用：打包入口
- finishMake => 未知
- afterCompile => 未知
3. 核心钩子触发顺序
- beforeRun => compiler.run()中触发
- run => compiler.run()中触发
- beforeCompile => compiler.compile()中触发
- compile => compiler.compile()中触发
- thisCompilation => compiler.compile()中触发 => compiler.newCompilation()中触发
- compilation => compiler.compile()中触发 => compiler.newCompilation()中触发
- make => compiler.compile()中触发
- finishMake => compiler.compile()中触发
- afterCompile => compiler.compile()中触发4. 核心代码文件路径
// 基于版本：
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0"
// 文件路径：
node_modules/.bin/webpack.cmd
node_modules/webpack/bin/webpack.js
node_modules/webpack-cli/bin/cli.js
node_modules/webpack/lib/webpack.js
node_modules/webpack/lib/EntryPlugin.js
node_modules/webpack/lib/Compiler.js
node_modules/webpack/lib/Compilation.jswebpack 构建流程详细分析
1. 启动 webpack（命令行执行 webpack）
- 1.1 执行脚本：node_modules/.bin/webpack.cmd
- 1.2 webpack.cmd 中先根据环境变量找到 node.exe
- 1.3 webpack.cmd 中再使用 node.exe 执行js脚本：node node_modules/webpack/bin/webpack.js
# node_modules/.bin/webpack.cmd
@ECHO off
SETLOCAL
CALL :find_dp0
# 1.2. 先根据环境变量找到 node.exe
IF EXIST "%dp0%\node.exe" (
SET "_prog=%dp0%\node.exe"
) ELSE (
SET "_prog=node"
SET PATHEXT=%PATHEXT:;.JS;=;%
)
# 1.3. 再使用 node.exe 执行js脚本
"%_prog%" "%dp0%\..\webpack\bin\webpack.js" %*
ENDLOCAL
EXIT /b %errorlevel%
:find_dp0
SET dp0=%~dp0
EXIT /b- 1.4 webpack.js 中判断是否安装了 webpack-cli
> 1.4.1 没有安装webpack-cli => 则提示安装
> 1.4.2 已经安装webpack-cli => 执行 runCli，require 了 node_modules/webpack-cli/bin/cli.js// node_modules/webpack/bin/webpack.js
#!/usr/bin/env node
// ...
const runCli = cli => {
const path = require("path");
const pkgPath = require.resolve(`${cli.package}/package.json`);
const pkg = require(pkgPath);
require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
};
// 没有安装 webpack-cli，则提示安装
if (!cli.installed) {
// ...
} else {
runCli(cli);
}2. 启动 webpack-cli
- 2.1 启动 webpack-cli：webpack.js 中导入了 node_modules/webpack-cli/bin/cli.js
- 2.2 cli.js 中检查 webpack 是否安装，没有则提示安装
- 2.3 cli.js 中执行 runCLI()，解析命令行参数，创建编译对象。（例如：读取配置文件，合并默认配置项等。）
> 2.3.1 runCLI() 中执行 cli.run() => 解析命令行参数 => .../lib/webpack-cli.js
> 2.3.2 cli.run() 中执行 cli.buildCommand() => 创建编译对象 => .../lib/webpack-cli.js// node_modules/webpack-cli/bin/cli.js
#!/usr/bin/env node
// ...
// 2.2 检查 webpack 是否安装
if (utils.packageExists('webpack')) {
// 参数1：process.argv => 命令行参数<br>
// 参数2：Module.prototype._compile => nodejs底层的编译方法<br>
// 2.3 执行runCLI
runCLI(process.argv, originalModuleCompile);
}
else{
// ...
}3. 创建编译对象 compiler
- 3.1 调用 cli.createCompiler() 生成一个 compiler
// cli.buildCommand() 中调用 cli.createCompiler() 生成一个 compiler；
// cli.buildCommand() 定义在：node_modules/webpack-cli/lib/webpack-cli.js
compiler = await this.createCompiler(options, callback);
// cli.createCompiler() 中调用 webpack(options) 返回一个 compiler
// webpack(options) 定义在：node_modules/webpack/lib/webpack.js
compiler = this.webpack(
// 合并options
// ...
)- 3.2 根据参数判断是否要结束命令行，是否watch
if (isWatch(compiler) && this.needWatchStdin(compiler)) {
process.stdin.on('end', () => {
process.exit(0);
});
process.stdin.resume();
}4. 实例化编译对象 compiler，预埋核心钩子
- 4.1 webpack() 中调用 createCompiler()，定义在：node_modules/webpack/lib/webpack.js
- 4.2 createCompiler() 中创建一个 comipler 实例
> 4.2.1 createCompiler() 中使用 new Compiler() 实例化一个 compiler，定义在：.../lib/Compiler.js
> 4.2.2 compiler 继承了 tapable，因此它具备钩子的操作能力（监听事件，触发事件，webpack是一个事件流）- 4.3 在 compiler 对象身上挂载文件读写的能力：
new NodeEnvironmentPlugin({
infrastructureLogging: options.infrastructureLogging
}).apply(compiler);- 4.4 在 compiler 对象身上挂载所有 plugins 插件
- 4.5 在 compiler 对象身上挂载默认配置项：
applyWebpackOptionsDefaults(options);- 4.6 启动 compilation、make 钩子的监听，具体流程如下：
> 4.6.1 createCompiler() 方法中调用 new WebpackOptionsApply().process(options, compiler);
> 4.6.2 然后启动钩子 entryOption 的监听；（注意hooks都是new Compiler时定义）
> 4.6.3 触发钩子 entryOption 的执行回调函数：启动了 compilation 钩子和 make 钩子的监听// 4.6.2 然后启动钩子 entryOption 的监听，在 EntryOptionPlugin 中定义的。（注意hooks都在new Compiler时定义）
new EntryOptionPlugin().apply(compiler);
// 4.6.3 触发钩子 entryOption 的执行回调函数：启动了 compilation 钩子和 make 钩子的监听；回调在EntryOptionPlugin中定义的。
compiler.hooks.entryOption.call(options.context, options.entry);
// 4.6.3 触发钩子 entryOption 的执行回调时，执行如下代码；启动钩子 make 的监听。
compiler.hooks.make.tapAsync('SingleEntryPlugin', (compilation, callback) => {
const { context, entry, name } = this
console.log("make 钩子监听执行了~~~~~~")
// compilation.addEntry(context, entry, name, callback)
})5. webpack() 中执行 compiler.run() 触发一系列钩子
webpack() 定义在：node_modules/webpack/lib/Compiler.js
- 5.1 触发 beforeRun 钩子
- 5.2 触发 run 钩子
- 5.3 执行 compile 方法（该方法里面继续触发了一堆钩子，参考第6点）
- 5.4 执行 compile 方法成功后，执行 onCompiled 将模块代码写入文件：writeFile()
// run() 里就是一堆钩子按着顺序触发
const run = () => {
// 5.1 触发 beforeRun 钩子
this.hooks.beforeRun.callAsync(this, err => {
if (err) return finalCallback(err);
// 5.2 触发 run 钩子
this.hooks.run.callAsync(this, err => {
if (err) return finalCallback(err);
this.readRecords(err => {
if (err) return finalCallback(err);
// 5.3 执行 compile 方法
this.compile(onCompiled);
});
});
});
};6. run() 中执行 compile()
run() 定义在：node_modules/webpack/lib/Compiler.js
- 6.1 触发钩子 beforeCompile
- 6.2 触发钩子 compile
- 6.3 触发钩子 thisCompilation、compilation (让 compilation 具备创建模块的能力)
- 6.4 触发钩子 make （重要：make 里面的 compilation.addEntry 根据入口等一些配置项创建模块，执行编译等操作）
- 6.5 触发钩子 finishMake
const params = this.newCompilationParams();
this.hooks.beforeCompile.callAsync(params, err => {
// ...
this.hooks.compile.call(params);
// 在newCompilation() 里面触发钩子 thisCompilation、compilation
const compilation = this.newCompilation(params);
// ...
this.hooks.make.callAsync(compilation, err => {
// ...
this.hooks.finishMake.callAsync(compilation, err => {
// ...
});
});
});7. 关于 addEntry 的分析（编译入口的重点）
- 7.1 make 钩子触发时执行 compilation.addEntry()，调用前的几个参数说明：见以下代码注释
- 7.2 make 钩子触发时接受一个 compilation 传递给 addEntry()，addEntry() 是在new compilation()里面定义
// entry 当前打包模块的相对路径（/src/index.js）
// options 里面包括 name、filename、publicPath 等配置
// context 当前项目根路径
// dep 是对当前入口模块依赖关系的处理
const { entry, options, context } = this;
const dep = EntryPlugin.createDependency(entry, options);
// 这里是 make 钩子的监听
// compilation 是 make 钩子触发的时候传给回调函数的值，addEntry 定义在 compilation 实例化的类里面
compiler.hooks.make.tapAsync("EntryPlugin", (compilation, callback) => {
compilation.addEntry(context, dep, options, err => {
callback(err);
});
});// 这里是触发 make 钩子
this.hooks.make.callAsync(compilation, err => { // ... }）
- 7.3 进入入口函数过后按照以下顺序调用 => Compilation.js
addEntry() => _addEntryItem() => addModuleTree() => handleModuleCreation()- 7.4 执行 addModuleTree()，在 compilation 当中我们可以通过 NormalModuleFactory 来创建一个普通模块对象；然后通过 dependencyFactories 获取它
// addModuleTree() 中 moduleFactory 是 NormalModuleFactory 创建的普通模块对象
const moduleFactory = this.dependencyFactories.get(Dep);- 7.5 handleModuleCreation() 方法中按照以下顺序调用 => Compilation.js
// 注意：factory 就是上面的参数 moduleFactory
factorizeModule() => factorizeQueue() => _factorizeModule() => factory.create()- 7.6 factory.create() 创建一个模块
> 7.6.1 factory.create() 是定义在 NormalModuleFactory 中的一个成员方法（NormalModuleFactory .js）
> 7.6.2 this.hooks.beforeResolve.callAsync 处理 loader 的路径编译工作，在回调里面触发钩子：factorize
> 7.6.3 this.hooks.factorize.callAsync 处理 loader，然后将 factoryResult 传给 callback()- 7.7 factory.create() 执行完成，将 factoryResult 放到 callback() 中执行
> 7.7.1 factory.create 的 callback() 拿到 result(实际就是 factoryResult )
const newModule = result.module;
> 7.7.2 newModule 传递给上面的 factorizeModule() 的 callback()；
// 回调 callback 拿到 newModule，然后执行addModule
this.factorizeModule({
// ...
},(err, newModule){// 回调 callback 拿到 newModule
// ...
this.addModule（）
})- 7.8 factory.create() 的回调中调用 addModule(newModule) 去创建 module
this.factorizeModule => ... => factory.create() => this.addModule（）=> this.buildModule()- 7.9 this.buildModule() 编译模块，最后将 doBuild 的执行结果传递给 callback；
> 7.9.1 doBuild() 编译完成的结果存在 this.modules 中
> 7.9.2 doBuild() 方法中实现了核心的编译功能：将 js 代码转为 ast 语法树 => 然后再转换成 code 代码
> 7.9.3 build 在 NormalModule.js 文件中，this.buildModule() => build => doBuild其中一些知识点：
- 什么是取值函数？参考：https://es6.ruanyifeng.com/?s...
const source = {
get foo() { return 1 }
};class MyClass {
constructor() {
// ...
}
get prop() {
return 'getter';
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// 'getter'- AST 语法树，参考：https://segmentfault.com/a/11...
tapabel库与钩子
tapabel是什么？
tapable 是一个类似于 Node.js 中的 EventEmitter的库，但更专注于自定义事件的触发和处理。webpack 通过 tapable 将实现与流程解耦，所有具体实现通过插件的形式存在。
tapabel的分类
同步钩子（syncHook）
- 熔断钩子（syncBialHook）
- 瀑布钩子（syncWaterfallHook）
- 循环钩子（syncLoopHook）
异步钩子（asyncHook）
对于异步钩子的使用，在添加事件监听时会存在三种方式： tap tapAsync tapPromise
- 异步串行钩子（asyncSeriesHook）
- 异步并行钩子（asyncParallelHook）
- 异步并行熔断钩子（asyncParallelBailHook）
钩子的监听与触发
const { SyncHook } = require('tapable')
// 钩子的定义
let hook = new SyncHook(['name', 'age'])
// 钩子的监听
hook.tap('fn1', function (name, age) {
console.log('fn1--->', name, age)
})
// 钩子的触发
hook.tap('fn2', function (name, age) {
console.log('fn2--->', name, age)
})
hook.call('zoe', 18)