编写一个简单的webpack插件

之前只是用但是没写过webapck插件，so，抽空看了下文档。例子中使用的插件是我发到npm用来测试功能的包。

使用方法：npm i compiler-fe-test 

基本插件结构

function compilerTest (options) {

}

compilerTest.prototype.apply = function (compiler) {

    compiler.plugin('compilation', function (compilation) {

             compilation.plugin("optimize", function() {

                console.log("这里被触发了哦");

            });

    })

}

module.exports = compilerTest

首先，webpack插件都是实例化带有 apply  原型方法的对象，apply方法在插件被webpack调用的时候触发。

在webpack中使用插件

var compilerFeTest = require('compiler-fe-test'); 

plugins: [ 

    new compilerFeTest({tip:'这里是插件接收的参数哦'})

]

webpack插件主要是使用到两个对象，compiler和compilation，不是很难理解。可以通过打印日志查看包含的内容。

compiler:：包含了webpack环境配置，当webpack调用插件的时候，会返回一个compiler对象，提供给插件。

compilation：是编译过程的生命周期，这个对象可以访问所有的模块和它们的依赖。

这两个对象的详细介绍地址：http://www.css88.com/doc/webpack2/api/plugins

异步编译插件

function compilerTest (options) {}

compilerTest.prototype.apply = function (compiler) {

    compiler.plugin('done', function () {

        console.log('我被调用了哦～～')

    })

    compiler.plugin("emit", function(compilation, callback) {

        // 做一些异步处理……

        console.log('进来了')

        setTimeout(function() {

            console.log("我是异步的哦");

            callback();

            }, 2000);

        console.log('出去了')

        });

}

module.exports = compilerTest

这里的callback ()怎么理解？当我们运行时候，打印的顺序：进来了-出去了-我是异步的哦-我被调用了哦。

如果我们注释掉callback(); 打印的顺序：进来了-出去了-我是异步的哦 ，我们发现 “我被调用了哦”这句日志没有被打印出来，所以：emit提供的callback是用来告诉编译进程，异步处理函数结束了，触发done 钩子。

在插件的开发过程中，往往我们都根据自身业务来编写，例如要实现一个功能，但是要使用到其他三方包的功能，很多功能拿来用，做整合就好了。