webpack plugn插件开发

webpack plugn配置：

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

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

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

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

plugins: [ 

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

]

基本插件类型：

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调用的时候触发。

异步插件类型：

function compilerTest (options) {}

compilerTest.prototype.apply = function (compiler) {

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

          console.log(1, '被调用了')

    })

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

          console.log('2', 'start')

          setTimeout(function() {

                console.log("3", '异步'); // 异步处理，回调函数通知外部“异步”执行完毕

                callback(); 

              }, 2000);

          console.log('4'，‘end’)

        });

}

module.exports = compilerTest

得到的顺序 2=>4=>3=>1 ，

如果注释掉callback()，则 2=>4=>3 ，得不到1，这是因为emit提供的callback是用来告诉编译进程，异步处理函数结束了，触发done 钩子。