Webpack 的事件机制

约 1552 字大约 5 分钟

webpackTapableAST

2026-04-15

Tapable 事件机制

Tapable 简介

Tapable 是 Webpack 的核心库，实现了一套插件机制。Webpack 的生命周期钩子都是基于 Tapable 的。

npm install tapable

核心概念

Hook：钩子，代表一个事件

Tap：注册插件到钩子

Call：触发钩子，执行所有注册的插件

const { SyncHook } = require('tapable');

// 1. 创建 Hook
const hook = new SyncHook(['arg1', 'arg2']);

// 2. 注册插件（Tap）
hook.tap('Plugin1', (arg1, arg2) => {
    console.log('Plugin1:', arg1, arg2);
});

hook.tap('Plugin2', (arg1, arg2) => {
    console.log('Plugin2:', arg1, arg2);
});

// 3. 触发（Call）
hook.call('value1', 'value2');

同步钩子

SyncHook

最基本的同步钩子，不关心返回值。

const { SyncHook } = require('tapable');

class Compiler {
    constructor() {
        this.hooks = {
            run: new SyncHook(['options'])
        };
    }
}

const compiler = new Compiler();

compiler.hooks.run.tap('Plugin1', (options) => {
    console.log('开始运行', options);
});

compiler.hooks.run.tap('Plugin2', (options) => {
    console.log('另一个插件');
});

compiler.hooks.run.call({ mode: 'production' });

SyncBailHook

保险钩子，当任一插件返回非 undefined 值时停止执行。

const { SyncBailHook } = require('tapable');

const hook = new SyncBailHook(['data']);

hook.tap('Plugin1', (data) => {
    console.log('Plugin1 执行');
    // 返回 undefined，继续执行
});

hook.tap('Plugin2', (data) => {
    console.log('Plugin2 执行');
    return 'stop'; // 返回非 undefined，停止
});

hook.tap('Plugin3', (data) => {
    console.log('不会执行');
});

hook.call({}); // 只执行 Plugin1 和 Plugin2

SyncWaterfallHook

瀑布钩子，上一个插件的返回值作为下一个插件的输入。

const { SyncWaterfallHook } = require('tapable');

const hook = new SyncWaterfallHook(['content']);

hook.tap('Plugin1', (content) => {
    return content + ' -> Plugin1';
});

hook.tap('Plugin2', (content) => {
    return content + ' -> Plugin2';
});

const result = hook.call('Initial');
console.log(result); // 'Initial -> Plugin1 -> Plugin2'

SyncLoopHook

循环钩子，当插件返回值时，重新执行所有插件。

const { SyncLoopHook } = require('tapable');

const hook = new SyncLoopHook(['count']);
let loopCount = 0;

hook.tap('Plugin1', (count) => {
    console.log('Plugin1', count);
    if (++loopCount < 3) {
        return true; // 返回 true，重新开始循环
    }
});

hook.tap('Plugin2', (count) => {
    console.log('Plugin2', count);
});

hook.call(1);

异步串行钩子

AsyncSeriesHook

异步插件按顺序执行。

const { AsyncSeriesHook } = require('tapable');

const hook = new AsyncSeriesHook(['data']);

hook.tapAsync('Plugin1', (data, callback) => {
    setTimeout(() => {
        console.log('Plugin1');
        callback();
    }, 1000);
});

hook.tapPromise('Plugin2', (data) => {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log('Plugin2');
            resolve();
        }, 1000);
    });
});

hook.callAsync({}, (err) => {
    console.log('全部完成');
});

AsyncSeriesWaterfallHook

异步瀑布钩子。

const { AsyncSeriesWaterfallHook } = require('tapable');

const hook = new AsyncSeriesWaterfallHook(['content']);

hook.tapAsync('Plugin1', (content, callback) => {
    callback(null, content + ' -> Plugin1');
});

hook.tapAsync('Plugin2', (content, callback) => {
    callback(null, content + ' -> Plugin2');
});

hook.callAsync('Initial', (err, result) => {
    console.log(result); // 'Initial -> Plugin1 -> Plugin2'
});

异步并行钩子

AsyncParallelHook

异步插件同时执行。

const { AsyncParallelHook } = require('tapable');

const hook = new AsyncParallelHook(['data']);

hook.tapAsync('Plugin1', (data, callback) => {
    setTimeout(() => {
        console.log('Plugin1');
        callback();
    }, 1000);
});

hook.tapAsync('Plugin2', (data, callback) => {
    setTimeout(() => {
        console.log('Plugin2');
        callback();
    }, 500);
});

hook.callAsync({}, (err) => {
    console.log('全部完成'); // 约 1 秒后执行
});

Tapable 在 Webpack 中的应用

// Webpack 中的 Compiler
class Compiler {
    constructor() {
        this.hooks = {
            run: new AsyncSeriesHook(['compiler']),
            compile: new SyncHook(['params']),
            compilation: new SyncHook(['compilation', 'params']),
            emit: new AsyncSeriesHook(['compilation']),
            done: new SyncHook(['stats'])
        };
    }
}

// Plugin 注册
class MyPlugin {
    apply(compiler) {
        compiler.hooks.run.tapAsync('MyPlugin', (compiler, callback) => {
            console.log('Webpack 开始运行');
            callback();
        });
        
        compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
            console.log('开始输出文件');
            callback();
        });
    }
}

AST 抽象语法树

什么是 AST

AST（Abstract Syntax Tree）是源代码的抽象语法结构的树形表示。

// 源代码
const a = 1 + 2;

// AST
{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "a"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "+",
                        "left": {
                            "type": "NumericLiteral",
                            "value": 1
                        },
                        "right": {
                            "type": "NumericLiteral",
                            "value": 2
                        }
                    }
                }
            ],
            "kind": "const"
        }
    ]
}

JavaScript 代码的解析过程

源代码 → 词法分析 → Token 流 → 语法分析 → AST

词法分析：将代码拆分为 Token

// 代码
const a = 1;

// Token
[
    { type: 'Keyword', value: 'const' },
    { type: 'Identifier', value: 'a' },
    { type: 'Punctuator', value: '=' },
    { type: 'Numeric', value: '1' },
    { type: 'Punctuator', value: ';' }
]

语法分析：将 Token 组织为 AST

AST 的结构和节点类型

常见节点类型：

Program：根节点
Identifier：标识符
Literal：字面量
Expression：表达式
Statement：语句
Declaration：声明
Function：函数
Class：类

使用 @babel/parser 生成 AST

const parser = require('@babel/parser');

const code = `
const add = (a, b) => a + b;
console.log(add(1, 2));
`;

const ast = parser.parse(code, {
    sourceType: 'module',
    plugins: ['jsx', 'typescript']
});

console.log(JSON.stringify(ast, null, 2));

使用 @babel/traverse 遍历 AST

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;

const code = 'const a = 1; const b = 2;';
const ast = parser.parse(code);

// 遍历所有变量声明
traverse(ast, {
    VariableDeclaration(path) {
        console.log('找到声明:', path.node.kind);
        
        path.node.declarations.forEach(decl => {
            console.log('变量名:', decl.id.name);
            console.log('初始值:', decl.init);
        });
    }
});

使用 @babel/generator 生成代码

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generate = require('@babel/generator').default;

const code = 'const a = 1 + 2;';
const ast = parser.parse(code);

// 修改 AST
traverse(ast, {
    BinaryExpression(path) {
        // 将 1 + 2 改为 3
        const t = require('@babel/types');
        path.replaceWith(t.numericLiteral(3));
    }
});

// 生成代码
const output = generate(ast, {
    minified: true,
    comments: false
});

console.log(output.code); // 'const a=3;'

Webpack 中的 AST 应用

模块解析和依赖分析

Webpack 使用 AST 分析模块的依赖关系。

// Webpack 解析依赖
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;

function getDependencies(source) {
    const ast = parser.parse(source, {
        sourceType: 'module'
    });
    
    const deps = [];
    
    traverse(ast, {
        ImportDeclaration({ node }) {
            deps.push(node.source.value);
        },
        CallExpression({ node }) {
            if (
                node.callee.name === 'require' ||
                node.callee.type === 'Import'
            ) {
                deps.push(node.arguments[0].value);
            }
        }
    });
    
    return deps;
}

Loader 中的 AST 转换

// 自定义 loader
module.exports = function(source) {
    const ast = parser.parse(source);
    
    traverse(ast, {
        // 转换逻辑
    });
    
    const output = generate(ast);
    return output.code;
};

Plugin 中的 AST 操作

class MyPlugin {
    apply(compiler) {
        compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
            compilation.hooks.optimizeChunkAssets.tap('MyPlugin', (chunks) => {
                // 操作 chunk 中的 AST
            });
        });
    }
}

实战：基于 Tapable 实现事件系统

const {
    SyncHook,
    SyncBailHook,
    SyncWaterfallHook,
    AsyncSeriesHook,
    AsyncParallelHook
} = require('tapable');

class EventEmitter {
    constructor() {
        this.hooks = {};
    }
    
    // 注册同步事件
    on(event, callback) {
        if (!this.hooks[event]) {
            this.hooks[event] = new SyncHook(['data']);
        }
        this.hooks[event].tap(callback.name || 'anonymous', callback);
    }
    
    // 注册一次性的事件
    once(event, callback) {
        const wrappedCallback = (data) => {
            callback(data);
            this.hooks[event].tap = () => {}; // 阻止后续注册
        };
        this.on(event, wrappedCallback);
    }
    
    // 触发事件
    emit(event, data) {
        if (this.hooks[event]) {
            this.hooks[event].call(data);
        }
    }
    
    // 注册瀑布事件
    waterfall(event, callback) {
        if (!this.hooks[event]) {
            this.hooks[event] = new SyncWaterfallHook(['data']);
        }
        this.hooks[event].tap(callback.name || 'anonymous', callback);
    }
    
    // 触发瀑布事件
    emitWaterfall(event, data) {
        if (this.hooks[event]) {
            return this.hooks[event].call(data);
        }
        return data;
    }
}

// 使用示例
const emitter = new EventEmitter();

emitter.on('data', function processData(data) {
    console.log('处理数据:', data);
});

emitter.emit('data', { id: 1 });

实战：基于 AST 实现代码转换

箭头函数转换

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generate = require('@babel/generator').default;
const t = require('@babel/types');

function transformArrowFunctions(code) {
    const ast = parser.parse(code);
    
    traverse(ast, {
        ArrowFunctionExpression(path) {
            const params = path.node.params;
            let body = path.node.body;
            
            // 如果是表达式，转为返回语句
            if (!t.isBlockStatement(body)) {
                body = t.blockStatement([
                    t.returnStatement(body)
                ]);
            }
            
            // 创建函数表达式
            const funcExpr = t.functionExpression(
                null,
                params,
                body
            );
            
            path.replaceWith(funcExpr);
        }
    });
    
    return generate(ast).code;
}

// 测试
const input = 'const add = (a, b) => a + b;';
console.log(transformArrowFunctions(input));
// 输出: const add = function(a, b) { return a + b; };

可选链操作符降级

function transformOptionalChaining(code) {
    const ast = parser.parse(code);
    
    traverse(ast, {
        OptionalMemberExpression(path) {
            const { object, property } = path.node;
            
            // 转为：object && object.property
            const newExpr = t.logicalExpression(
                '&&',
                object,
                t.memberExpression(object, property, false)
            );
            
            path.replaceWith(newExpr);
        }
    });
    
    return generate(ast).code;
}

// 测试
const input = 'const name = user?.profile?.name;';
console.log(transformOptionalChaining(input));
// 输出: const name = user && user.profile && user.profile.name;

学习资源和工具推荐

工具

AST Explorer：https://astexplorer.net/ - 在线查看和操作 AST
@babel/parser：生成 AST
@babel/traverse：遍历 AST
@babel/generator：生成代码
@babel/types：AST 节点工具

学习资源

Babel 插件手册：https://github.com/jamiebuilds/babel-handbook
Tapable 文档：https://github.com/webpack/tapable
AST 规范：https://github.com/estree/estree

总结

Tapable 和 AST 是理解 Webpack 的关键：

Tapable：实现插件系统
AST：实现代码转换
两者结合：构成了 Webpack 的核心机制

javascript

typescript

Flutter

React Native

Taro

uni-app

webpack

vite

rspack

脚本世界

规范先行

代码风格

ESLint

代码质量

工程设计

效率工具

持续集成与部署

运维与基础设施

Monorepo

核心基础

路由与状态

渲染与框架

实践与优化

Webpack 的事件机制