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 钩子。