webpack之自定义plugin

webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。

plugin: 开始打包，在某个时刻，帮助我们处理一些什么事情的机制
plugin要比loader稍微复杂一些，在webpack的源码中，用plugin的机制还是占有非常大的场景，可以说plugin是webpack的灵魂
plugin是一个类，里面包含一个apply函数，接受一个参数，compiler

案例（统计build生成文件数量，以及每个文件size）

创建file-webpack-plugin.js

class FileWebpackPlugin {
  constructor() {
  }
//compiler:webpack实例 
  apply(compiler) {
  } 
}
module.exports = FileWebpackPlugin;

配置文件里使用

const FileWebpackPlugin = require("./plugins/file-webpack-plugin");
plugins: [new FileWebpackPlugin()]

如何传递参数

//webpack配置文件 
plugins: [
 new FileWebpackPlugin({
   author: "HBF"
 })
]
//file-webpack-plugin.js
class FileWebpackPlugin {
 constructor(options){
     //接受参数
    this.options = options
    console.log('options', options); //sy-log
 }
//compiler:webpack实例 
 apply(compiler) {
 } 
}
module.exports = FileWebpackPlugin;

配置plugin在什么时刻进行

class FileWebpackPlugin{
    constructor(options){
        //接受参数
        this.options = options
        console.log('options', options); //sy-log
    }
    apply(compiler){
        // 定义插件执行的时机（异步） 
        compiler.hooks.emit.tapAsync('FileWebpackPlugin', (compilation, callback)=>{
            const packFilesLen = Object.keys(compilation.assets).length
            let content = `本次构建结果统计：\n\r生成文件数量：${packFilesLen}个;\n\r`;
            if(this.options.author){
                content += `执行者：${this.options.author};\n\r`;
            }
            for (let filename in compilation.assets) {
                content += `文件名称：${filename}，文件大小：${compilation.assets[filename].size()};\n\r`;
            }
            compilation.assets['file.txt'] = {
                source: function(){
                    return content
                },
                size: function(){
                    return 1024
                }
            }
            callback()
        })

      //compiler.hooks.compile.tap("CopyrightWebpackPlugin", compilation => { 
      // console.log("开始了");
      //});
    }

}
module.exports = FileWebpackPlugin

这样自己就编写了一个插件，快来试试吧！！！