webpack插件怎么手写

wade

发布于 2020-09-14 14:58:38

8840

发布于 2020-09-14 14:58:38

webpack插件没什么好说的，用过的都知道怎么配置，只是不知道内部怎么执行。今天学一学插件的一些机制，手写一个插件并不难。

之前介绍过了，webpack本质上是一种事件流机制，核心就是tapable，通过注册事件，触发回调，完成插件在不同生命周期的调用，内部也是通过大量的插件实现的。tapable内部暴露的方法挺多的，主要就是同步和异步，异步分为并行和串行。可以去GitHub上面看看：

https://github.com/webpack/tapable#tapable

这些方法都有用法示例，本来想写写使用方法，发现GitHub上面都有了，就不写了：

const {
 SyncHook,
 SyncBailHook,
 SyncWaterfallHook,
 SyncLoopHook,
 AsyncParallelHook,
 AsyncParallelBailHook,
 AsyncSeriesHook,
 AsyncSeriesBailHook,
 AsyncSeriesWaterfallHook
 } = require("tapable");

在写插件之前，不得不提一下compiler和compilation：

compiler对象代表了完整的 webpack 环境配置，可以访问整个环境。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置（options、loader、plugin等）。使用插件时将收到此 compiler 对象的引用。

compilation 对象代表了一次资源版本构建。在运行过程中，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation提供了很多关键时机的回调供插件做自定义处理时使用。

使用插件就是new一个，所以插件其实就是一个类（构造函数或者class类），内部在prototype定义一个apply方法（会直接调用），并提供compiler，通过compiler提供的hooks注册事件和在相应的回调里面进行操作。而compiler提供的compilation的重要属性是assets，表示所有的静态资源。

关于提供的hook和参数，可以在webpack>lib>Compiler.js搜hooks，其实compiler和compilation都是继承tapable。

关于hooks分别表示什么阶段可以去官网查看：https://www.webpackjs.com/api/compiler-hooks/

还需要明确一下，tapable里面提供的几个hook，同步的（sync开头）注册是tap，异步的（async开头）有tap、tapAsync、tapPromise，后面两个提供了回调函数。

引入自己的插件：

const MyPlugin = require('./plugins/my-plugin.js')

plugins里面使用：

new MyPlugin({
  name: 'wade plugin'
})
my-plugin.js里面：
class MyPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler){
        compiler.hooks.done.tap('MyPlugin', (stats) => {
            console.log('MyPlugin ', this.options);
        });
    }
}
module.exports = MyPlugin;

apply提供了compiler，done是编译完成，同步的调用tap，第一个参数没什么意义，一般写自己插件名字，stats里面对象就多了，有 options、 outputOptions等，可以自己命令行那边看看。

异步的：

class MyPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler){
        compiler.hooks.done.tapAsync('DonePlugin', (stats, callback) => {
            console.log('Hello ', this.options.name);
            setTimeout(() => {console.log(1);}, 1000);
            setTimeout(() => {console.log(2);}, 2000);
            setTimeout(() => {console.log(3);}, 3000);
            setTimeout(() => {
                callback();
            }, 4000)
        });
    }
}
module.exports = MyPlugin;

可以看看控制台，看看效果。

一般自己写插件会在emit和afterEmit进行一些操作，这两个钩子的参数是compilation，里面有assets是静态资源，可以进行操作：

compiler.hooks.emit.tap('DonePlugin', (compilation) => {
   let assets = compilation.assets;
    console.log(assets);
});

比如我想给bundle.js添加一个字符串：

let content = assets['bundle.js'].source();
assets['bundle.js'] = {
    source(){
        return '"build by wade"\r\n' + content
    },
    size(){
        return content.length;
    }
}

打包结果：

比如创建一个文件：

let creatContent = '创建一个文件';
assets['creat.js'] = {
    source(){
        return creatContent
    },
    size(){
        return creatContent.length
    }
}