-
webpack运行图
webpack运行图 - 内置钩子
| 对象 | 钩子 |
|---|---|
| Compiler | run,compile,compilation,make,emit,done |
| Compilation | buildModule,normalModuleLoader,succeedModule,finishModules,seal,optimize,after-seal |
| Module Factory | beforeResolver,afterResolver,module,parser |
| Module | |
| Parser | program,statement,call,expression |
| Template | hash,bootstrap,localVars,render |
- apply
是每个插件必备的方法，webpack会在run的时候通过apply注入webpack实例，webpack还提供许多钩子函数，分别对应webpack执行的不同阶段，你可以在apply利用compiler为webpack注册事件
代码
minify-annotation-plugin.js
去除文件中 /.../ 的注释
module.exports = class MinifyAnnotationPlugin {
constructor(options) {
this.options = options;
this.externalModules = {};
}
apply(compiler) {
var reg = /\/(\*)+.*(\*)+\//g; // 注释正则
compiler.hooks.emit.tap("MinifyAnnotation", compilation => { // 注册emit事件
// compilation对应所有编译的文件
Object.keys(compilation.assets).forEach(filename => {
let content = compilation.assets[filename].source();
content = content.replace(reg, ""); // 替换掉注释
// 返回新的内容
compilation.assets[filename] = {
source() {
return content;
},
size() {
return content.length;
}
};
});
});
}
};
