如何编写一个plugin

什么是plugin

plugin能帮助我们在webpack打包生成文件的某个时间段帮我们做一些事，类似于Vue中的生命周期函数。例如html-webpack-plugin能帮我们在打包结束生成html文件，并把打包生成的脚本文件插入html中。

plugin的编写

假如我们想写一个plugin，这个plguin能帮我们在打包生成文件之后再生成一个.txt文件，里面写我们的版权信息。实现代码如下：

class CopyrightWebpackPlugin {
  //  constructor部分仅为演示用的代码
  constructor(options) {
    console.log(options.name)
  }
  apply(compiler) {
    compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (compilation, cb) => { // 在emit这个钩子的时期，执行里面的函数。异步的钩子就是用tapAsync
      compilation.assets['copyright.txt']= { // assets属性是打包生成的内容(对象)，往这个对象写新的属性即能新增文件
        source: function() { //  文件的内容
          return 'copyright by Jacleklm'
        },
        size: function() { //  文件的长度
          return 21
        }
      }
      cb()
    })
  }
}

module.exports = CopyrightWebpackPlugin

调试

"scripts": {
    "debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",
    "build": "webpack"
}

• inspect 开启node调试
• inspect-brk 代码第一行开启断点

通过node调试工具，来进行插件的编写。在你需要调试的地方debugger，如下所示，这样就可以知道每一个阶段变量里的具体内容了。

代码解读

插件是一个类

向插件传递参数：通过在webpack配置的new xxx里写对象属性（如下面的代码），而插件的constructor的参数则能接收这个对象（如上面的代码的constructor部分）。

plugins: [
    new CopyrightWebpackPlugin({
      name: 'Jacleklm'
    })
  ],

compiler

compiler对象是webpack的实例，compiler有很多hooks（钩子），挑选合适的钩子（eg. emit）写要执行的操作即可。

compilation

compilation里存放的是这一次打包的所有内容，eg. 打包生成的内容是放在compilation.assets中。