前端工程化9：Webpack构建流程分析，Webpack5源码解读

Posted 2021-09-04 拖泥羊

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端工程化9：Webpack构建流程分析，Webpack5源码解读相关的知识，希望对你有一定的参考价值。

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.js

1.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、make

1.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 触发钩子 afterCompile

2. 核心钩子的监听

- 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.js

webpack 构建流程详细分析

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)