如何编写一个plugin

webpack

 2019/09/29 

什么是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

代码解读

插件是一个类

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

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

compiler

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

compilation

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

原文作者：Jacleklm

原文链接：http://jacleklm.github.io/2019/09/29/%E5%A6%82%E4%BD%95%E7%BC%96%E5%86%99%E4%B8%80%E4%B8%AAplugin/

发表日期：September 29th 2019, 8:10:21 pm

更新日期：September 17th 2023, 10:00:22 pm

Next Post

Bundler源码编写
Previous Post

如何编写一个loader

CATALOG

1. 什么是plugin
2. plugin的编写
3. 代码解读