如何寫一個webpack plugin？

• 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;
          }
        };
      });
    });
  }
};
複製代碼