之前只是用但是没写过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 钩子。
在插件的开发过程中,往往我们都根据自身业务来编写,例如要实现一个功能,但是要使用到其他三方包的功能,很多功能拿来用,做整合就好了。