扒一扒webpack系列之二Tapable底层原理揭秘

2024-02-02 09:29:46

本文通过对webpack基础的Tapable进行分析，揭开其内部运行机制，以便大家对Tapable有更深入的了解。

前言

在上一篇文章中，我们对 webpack 的整体编译过程进行了一个简单的介绍。这次，我们就来重点分析一下 webpack 中的基础模块 Tapable。webpack 在整个编译过程中暴露了大量 Hook 供内部/外部插件使用，同时还支持扩展各种插件。而webpack内部处理的代码也依赖于 Hook 和插件，这部分的功能就依赖于 Tapable。

Tapable简介

Tapable 是一个用来管理和触发事件的库，它提供了统一的事件订阅和触发机制。在 webpack 中，Tapable 被用来管理编译过程中的各种事件，包括模块编译、资源加载、编译完成等。

Tapable 的核心是一个叫做 "tap" 的方法，这个方法可以用来订阅一个事件。当事件被触发时，所有订阅了该事件的回调函数都会被调用。

Tapable 还提供了 "call" 和 "apply" 两个方法，这两个方法可以用来触发一个事件。

Tapable在webpack中的应用

webpack 中使用了 Tapable 来管理编译过程中的各种事件。这些事件包括：

模块编译
资源加载
编译完成
打包完成

webpack 会在这些事件发生时触发对应的 Hook，然后所有订阅了该 Hook 的插件都会被调用。

Tapable 是 webpack 中一个非常重要的模块，它提供了统一的事件订阅和触发机制，使 webpack 能够灵活地扩展各种插件。

Tapable的实现原理

Tapable 的实现原理很简单，它主要依靠一个叫做 "tap" 的方法。这个方法可以用来订阅一个事件。当事件被触发时，所有订阅了该事件的回调函数都会被调用。

Tapable 还提供了 "call" 和 "apply" 两个方法，这两个方法可以用来触发一个事件。

Tapable 的核心代码如下：

class Tapable {
  constructor() {
    this.hooks = {}
  }

  tap(eventName, fn) {
    if (!this.hooks[eventName]) {
      this.hooks[eventName] = []
    }
    this.hooks[eventName].push(fn)
  }

  call(eventName, ...args) {
    if (this.hooks[eventName]) {
      this.hooks[eventName].forEach(fn => fn(...args))
    }
  }

  apply(eventName, ...args) {
    if (this.hooks[eventName]) {
      this.hooks[eventName].forEach(fn => fn.apply(null, args))
    }
  }
}