插件的内部实现_webpack插件怎么手写

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

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

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

这些方法都有用法示例&＃xff0c;本来想写写使用方法&＃xff0c;发现GitHub上面都有了&＃xff0c;就不写了&＃xff1a;

const {

SyncHook,

SyncBailHook,

SyncWaterfallHook,

SyncLoopHook,

AsyncParallelHook,

AsyncParallelBailHook,

AsyncSeriesHook,

AsyncSeriesBailHook,

AsyncSeriesWaterfallHook

 } &＃61; require("tapable");

在写插件之前&＃xff0c;不得不提一下compiler和compilation&＃xff1a;

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

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

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

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

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

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

引入自己的插件&＃xff1a;

const MyPlugin &＃61; require(&＃39;./plugins/my-plugin.js&＃39;)

plugins里面使用&＃xff1a;

new MyPlugin({

  name: &＃39;wade plugin&＃39;

})

my-plugin.js里面&＃xff1a;

class MyPlugin {

    constructor(options) {

        this.options &＃61; options;

    }

    apply(compiler){

        compiler.hooks.done.tap(&＃39;MyPlugin&＃39;, (stats) &＃61;> {

            console.log(&＃39;MyPlugin &＃39;, this.options);

        });

    }

}

module.exports &＃61; MyPlugin;

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

异步的&＃xff1a;

class MyPlugin {

    constructor(options) {

        this.options &＃61; options;

    }

    apply(compiler){

        compiler.hooks.done.tapAsync(&＃39;DonePlugin&＃39;, (stats, callback) &＃61;> {

            console.log(&＃39;Hello &＃39;, this.options.name);

            setTimeout(() &＃61;> {console.log(1);}, 1000);

            setTimeout(() &＃61;> {console.log(2);}, 2000);

            setTimeout(() &＃61;> {console.log(3);}, 3000);

            setTimeout(() &＃61;> {

                callback();

            }, 4000)

        });

    }

}

module.exports &＃61; MyPlugin;

可以看看控制台&＃xff0c;看看效果。

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

compiler.hooks.emit.tap(&＃39;DonePlugin&＃39;, (compilation) &＃61;> {

   let assets &＃61; compilation.assets;

    console.log(assets);

});

比如我想给bundle.js添加一个字符串&＃xff1a;

let content &＃61; assets[&＃39;bundle.js&＃39;].source();

assets[&＃39;bundle.js&＃39;] &＃61; {

    source(){

        return &＃39;"build by wade"\r\n&＃39; &＃43; content

    },

    size(){

        return content.length;

    }

}

打包结果&＃xff1a;

比如创建一个文件&＃xff1a;

let creatContent &＃61; &＃39;创建一个文件&＃39;;

assets[&＃39;creat.js&＃39;] &＃61; {

    source(){

        return creatContent

    },

    size(){

        return creatContent.length

    }

}

上面都是没什么意义的操作&＃xff0c;只是想表达插件的一些方法&＃xff0c;比如可以在文件生成之后进行压缩&＃xff0c;或者自动化部署到服务器之类的插件。真正写一些有用的插件还是需要根据具体清空具体实现代码&＃xff0c;可能还需要引入一些外部的插件&＃xff0c;比如进行请求需要引入ajax或者axios&＃xff0c;压缩要引入JSZip等。

(完)

Coding 个人笔记