Webpack plugin 简单介绍和使用

Question

Webpack 事件流

Webpack 就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果，插件就像是一个插入到生产线中的一个功能，在特地的时机对生产线上的资源进行处理。Webpack 通过 Tapable 来组织这条生产线。Webpack 在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到生产线中，去改变生产线的运作。Webpack 的核心功能，是抽离成很多个内部插件来实现的

插件

那么怎么样的一个东西可以称之为 webpack 插件呢？一个完整的 webpack 插件需要满足以下几点规则和特征：

• 一个具名 JavaScript 函数。
• 是一个独立的模块。
• 模块对外暴露一个 js 函数。
• 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply 方法。
• apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子，钩子的回调中能拿到当前编译的 compilation 对象，如果是异步编译插件的话可以拿到回调 callback。
  完成自定义子编译流程并处理 complition 对象的内部数据。
  如果异步编译插件的话，数据处理完成后执行 callback 回调。

在开发 Plugin 时最常用的两个对象就是 Complier 和 Compilation,它们是 Plugin 和 Webpack 之间的桥梁

Compiler

Compiler 对象包含了 Webpack 环境所有的配置信息，包含 options,loaders,plugins 这些信息，这个对象在 Webpack 启动时候被实例化，它是全局唯一的，可以简单地把它理解为 Webpack 实例。

Compilation

Compilation 对象包含了当前的模块资源，编译生成资源，变化的文件等。当 Webpack 以开发模式运行时，每当检测到一个文件变化，一次新的 Compilation 将被创建。Compilation 也提供了很多事件回调供插件拓展，通过 Compilation 也能读取到 Compiler 对象。

• modules 记录了所有解析后的模块
• chunks 记录了所有 chunk
• assets 记录了所有要生成的文件

Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译。

Tapable

Webpack 中最核心的负责编译的 Compiler 和负责创建 bundles 的 Compilation 都是 Tapable 的实例。 Tapable 包暴露出很多钩子函数。
核心代码

class SyncHook{
    constructor(){
       this.hooks = [];
     }
    tap(name,fn){
        this.hooks.push(fn);
    }
    call() {
        this.hooks.forEach(hook => hook(...arguments));
    }
}

在 Webpack hook 上的所有钩子都是 Tapable 的示例，所以我们可以通过 tap 方法监听事件，使用 call 方法广播事件。