如何写一个webpack plugin?

• 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;
          }
        };
      });
    });
  }
};

转载于:https://www.jianshu.com/p/69738c8fc5a6