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

头像
拖泥羊
    阅读 10 分钟

    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
    其中一些知识点：
    1. 什么是取值函数？参考：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'
    1. AST 语法树，参考：https://segmentfault.com/a/11...

    tapabel库与钩子

    tapabel是什么？

    tapable 是一个类似于 Node.js 中的 EventEmitter的库，但更专注于自定义事件的触发和处理。webpack 通过 tapable 将实现与流程解耦，所有具体实现通过插件的形式存在。

    tapabel的分类

    同步钩子（syncHook）
    1. 熔断钩子（syncBialHook）
    2. 瀑布钩子（syncWaterfallHook）
    3. 循环钩子（syncLoopHook）
    异步钩子（asyncHook）

    对于异步钩子的使用，在添加事件监听时会存在三种方式： tap tapAsync tapPromise

    1. 异步串行钩子（asyncSeriesHook）
    2. 异步并行钩子（asyncParallelHook）
    3. 异步并行熔断钩子（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)
    代码示例，参考：本文 Webpack 相关源码
    相关知识点：

    1. 发布订阅模式和观察者模式
    2. NodeJs 中的 EventEmitter
    3. Tapable 的相关知识点

    特别鸣谢：拉勾教育前端高薪训练营

    前端webpack构建工具源码分析工程化
    拖泥羊
    47 声望5 粉丝
    « 上一篇
    前端工程化8：Webpack5打包文件核心源码解读
    下一篇 »
    鸿蒙系统：如何使用前端技术/JS开发鸿蒙应用？

    引用和评论

    推荐阅读
    头像
    鸿蒙系统：如何使用前端技术/JS开发鸿蒙应用？

    拖泥羊赞 2阅读 14.4k

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.3k

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 13阅读 3.2k

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 15阅读 22.5k评论 18

    0 条评论
    得票最新