webpack插件机制

function MyPlugin(options) {} //根据options配置插件

MyPlugin.prototype.someFunc = function(){} 
// 2.函数原型上的 apply 方法会注入 compiler 对象,pply方法是必须要有的，因为当我们使用一个插件时（new somePlugins({})），webpack会去寻找插件的apply方法并执行

MyPlugin.prototype.apply = function(compiler) { // 3.compiler 对象上挂载了相应的 webpack 事件钩子 4.事件钩子的回调函数里能拿到编译后的 compilation 对象 

   // compiler.plugin(‘***‘)和compilation.plugin(‘***‘)代表什么？
   // document.addEventListener熟悉吧？其实是类似的
   // compiler.plugin(‘***‘)就相当于给compiler设置了事件监听
   // 所以compiler.plugin(‘compile‘)就代表：当编译器监听到compile事件时，我们应该做些什么

　　// compile（‘编译器‘对‘开始编译‘这个事件的监听）
  compiler.plugin("compile", function(params) {
    console.log("The compiler is starting to compile...");
  });

　　// compilation（‘编译器‘对‘编译ing‘这个事件的监听）
   compiler.plugin("compilation", function(compilation) {
     console.log("The compiler is starting a new compilation...");
     // 在compilation事件监听中，我们可以访问compilation引用，它是一个代表编译过程的对象引用
     // 我们一定要区分compiler和compilation，一个代表编译器实体，另一个代表编译过程
     // optimize(‘编译过程‘对‘优化文件‘这个事件的监听)
     compilation.plugin("optimize", function() {
       console.log("The compilation is starting to optimize files...");
     });
   });

　　// emit（‘编译器‘对‘生成最终资源‘这个事件的监听）

　 compiler.plugin(‘emit‘, (compilation, callback) => { ... })

} 
// 1.独立的 JS 模块，暴露相应的函数 
module.exports = MyPlugin

var MyPlugun = require(‘my-plugin‘)
var webpackConfig = {

  plugins:[
　　new MyPlugin({options:true})
]}