Webpack插件核心原理

引言

围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。

所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。

今天，我们来聊聊 Webpack 中必不可少的核心 Plugin 机制 ～

Plugin

本质上在 Webpack 编译阶段会为各个编译对象初始化不同的 Hook ，开发者可以在自己编写的 Plugin 中监听到这些 Hook ，在打包的某个特定时间段触发对应 Hook 注入特定的逻辑从而实现自己的行为。

关于 Plugin 中的 Hook 内部完全是基于 tapable 来实现

Plugin 中的常用对象

首先让我们先来看看 Webpack 中哪些对象可以注册 Hook :

• compiler Hook

• compilation Hook

• ContextModuleFactory Hook

• JavascriptParser Hooks

• NormalModuleFactory Hooks

别担心，也许对于这 5 个对象现在你会感觉到非常陌生，之后我会逐步带你攻克它们。

插件的基本构成

我们先来看这样一个最简单的插件，它会在 compilation（编译）完成时执行输出 done :

class DonePlugin {
   
  apply(compiler) {
   
    // 调用 Compiler Hook 注册额外逻辑
    compiler.hooks.done.tap('Plugin Done', () => {
   
      console.log('compilation done');
    });
  }
}

module.exports = DonePlugin;

此时，在 compilation 完成时打包终端会打印出来一行 compilation done。

我们可以看到一个 Webpack Plugin 主要由以下几个方面组成:

• 首先一个 Plugin 应该是一个 class，当然也可以是一个函数。

• 其次 Plugin 的原型对象上应该存在一个 apply 方法，当 webpack 创建 compiler 对象时会调用各个插件实例上的 apply 方法并且传入 compiler 对象作为参数。

• 同时需要指定一个绑定在 compiler 对象上的 Hook ， 比如 compiler.hooks.done.tap 在传入的 compiler 对象上监听 done 事件。

• 在 Hook 的回调中处理插件自身的逻辑，这里我们简单的做了 console.log。

• 根据 Hook 的种类，在完成逻辑后通知 webpack 继续进行。

插件的构建对象

上边我们有提到过 Webpack Plugin 中哪些对应可以进行 Hook 注册，接下来我会带你深入这 5 个对象。

理解它们是理解并应用 Webpack Plugin 的重中之重。

compiler 对象

class DonePlugin {
   
  apply(compiler) {
   
    // 调用 Compiler Hook 注册额外逻辑
    compiler.hooks.done.tapAsync('Plugin Done', (stats, callback) => {
   
      console.log(