从0实现一个plugin

一、初始化一个webpack项目

二、src同级目录下新建plugins文件夹

plugin和loader不一样，我们使用的时候，通过new关键字使用，说明plugin是一个类。

定义一个简单的插件格式
class CopyrightWebpackPlugin {
  constructor() {
  }
  // 当调用插件的时候，会执行apply方法
  // 参数compiler可以理解是webpack的实例，可以拿到webpack的配置信息
  apply(compiler) {
    console.log(compiler)
  }
}
module.exports = CopyrightWebpackPlugin

使用插件
const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')
plugins: [
    new CopyrightWebpackPlugin();
]
使用插件

三、插件中接收配置参数

wenpack.config.js
plugins: [
    new CopyrightWebpackPlugin({
      name: 'dell'
  });
]

copyright-webpack-plugin：
class CopyrightWebpackPlugin {
  constructor(options) {
        console.log(options) // 接收传入的参数
  }
  // 当调用插件的时候，会执行apply方法
  // 参数compiler可以理解是webpack的实例，可以拿到webpack的配置信息
  apply(compiler) {
    console.log(compiler)
  }
}
module.exports = CopyrightWebpackPlugin

四、编写插件

插件有个hook，想要哪个钩子中做事情，就在哪个钩子下写方法

// 想要在打包后，向dir文件夹下再插入一个文件
class CopyrightWebpackPlugin {
  constructor(options) {
    console.log('==========执行plugin=========')
    console.log(options, '====9999')
  }
  // 当调用插件的时候，会执行apply方法
  // 参数compiler可以理解是webpack的实例，可以拿到webpack的配置信息
  apply(compiler) {
    // console.log(compiler)
    compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => { // compilation:本次配置
      // console.log(compilation.assets)
      compilation.assets['copyright.txt'] = {
        source: function() {
          return 'copyright by dell'
        },
        size: function() {
          return 21
        }
      }
      cb()
    })
  }
}
module.exports = CopyrightWebpackPlugin

五、插件和loader的执行顺序

compler还有很多时刻，有的会在loader之前，有的会在loader之后。
如果不考虑钩子，在constructor里面执行的话，plugin是先于loader执行。

六、同步时刻的处理

class CopyrightWebpackPlugin {
  constructor(options) {
    console.log('==========执行plugin=========')
    console.log(options, '====9999')
  }
  // 当调用插件的时候，会执行apply方法
  // 参数compiler可以理解是webpack的实例，可以拿到webpack的配置信息
  apply(compiler) {
    // 如果遇到同步的，就要用tap 不能使用tapAsync
    // 同步的不需要cb
    compiler.hooks.compile.tap('CopyrightWebpackPlugin', (compilation) => {
      console.log(compilation)
    })
    // console.log(compiler)
    compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => { // compilation:本次配置
      // console.log(compilation.assets)
      console.log('========插件emit时刻========')
      compilation.assets['copyright.txt'] = {
        source: function() {
          return 'copyright by dell'
        },
        size: function() {
          return 21
        }
      }
      cb()
    })
  }
}
module.exports = CopyrightWebpackPlugin

七、如何调试

package.json
// inspacet:开启node的调试工具
// inspacet-brk:在第一行打上断点
script: {
    "debug": "node --inspacet --inspacet-brk node_module/webpack/bin/webpack.js"
}

compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => { // compilation:本次配置
      // console.log(compilation.assets)
      debugger
      console.log('========插件emit时刻========')
      compilation.assets['copyright.txt'] = {
        source: function() {
          return 'copyright by dell'
        },
        size: function() {
          return 21
        }
      }
      cb()
    })