plugin是什么

在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。plugin是一个扩展器，在webpack打包的过程中，基于事件驱动的机制，监听webpack打包过程中的某些节点，从而执行广泛的任务。

基本插件架构

一个插件由以下构成：

• 一个具名 JavaScript 函数。

• 在它的原型上定义 apply 方法。

• 指定一个触及到 webpack 本身的 事件钩子。

• 操作 webpack 内部的实例特定数据。

• 在实现功能后调用 webpack 提供的 callback。

首先是写一个构造函数（此构造函数上的 prototype 对象具有 apply 方法），apply 方法可以接收一个 webpack compiler 对象的引用，从而可以在回调函数中访问到 compiler 对象。再就是构造方法，接收配置中传入的options（此构造方法根据需要可写可不写）。

class ReadmeWebpackPlugin {
    constructor(options) {
         console.log(options)
    }
    apply(compiler){
    }
}
module.exports = ReadmeWebpackPlugin;

插件的使用：在webpack.config.js中的plugins 数组中添加一个实例

const ReadmetWebpackPlugin = require('./plugins/readme-webpack-plugin')
plugins:[
    new ReadmetWebpackPlugin({
      name:'hfj'
    })
  ],

这里传入了一个参数，可以在命令行看到是可以打印出来的。

compiler 和 compilation

在插件开发中最重要的两个资源就是 compiler 和 compilation 对象。理解它们的角色是扩展 webpack 引擎重要的第一步。

compiler可以理解为一个webpack的实例，该实例存储了webpack配置、打包过程等一系列的内容。compiler提供了compiler.hooks,在为 webpack 开发插件时，你可能需要知道每个钩子函数是在哪里调用的，具体就可以查阅官方文档。这里可以看到有很多时刻，我们可以根据这些不同的时刻去让插件做不同的事情。

compilation 模块会被 compiler 用来创建新的编译（或新的构建）。该实例存放的是本次打包编译的内容。

事件钩子

当我们决定在在compiler的某个确定的hooks写一些事情的时候，会发现hooks里有异步钩子和同步钩子，随便举几个例子：

当为AsyncSeriesHook时，我们使用tapAsync来tap插件，需要注意，我们需要调用 callback，此 callback 将作为最后一个参数传入函数。

当为SyncHook时，使用tap,并且不再需要callback。 我会把同步和异步两种情况写到后边的实战代码中，可以对比看一下

实战

现在我需要自己写一个插件，在webpack打包结束后把一个readme.txt放到dist目录。 首先需要知道，这是怎样的时刻，是的，是在webpack打包结束后，生成资源到 output 目录之前。 通过查看文档中的complier hook。Very good！有emit这个hook!同时发现，这个emit是AsyncSeriesHook，异步的，所以记得上文提到过的，使用它的tapAsync方法,并且要回调函数。 思路已经很清晰了，代码写起来！

class ReadmeWebpackPlugin {
    apply(compiler){
        compiler.hooks.emit.tapAsync('ReadmeWebpackPlugin',( compilation,callback ) => {
            console.log(compilation.assets)
            compilation.assets['readme.txt'] = {
                source:function(){
                    return 'readme'
                },
                size:function(){
                    return 6
                }
            }
            callback()
        })
    }
}
module.exports = ReadmeWebpackPlugin;

上述代码中打印了compilation.assets，打包后的内容有哪些是放在compilation的assets属性中的，所以我们可以依照上述增加键值对的方式再增加一个文件。 用一下：

//webpack.config.js
...其他配置,
 plugins:[
    new ReadmetWebpackPlugin()
  ],

成功：

这样，一个我们自己的插件就完成了。 附该项目完整地址附该项目完整地址

总结

如果你阅读了webpack的源码，你会发现，webpack中有很大的篇幅是基于plugin的机制编写的，所以可以说plugin是webapck的核心。好在我们已经搞懂了webpack的plugin机制，已经可以写自己的插件了。