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机制，已经可以写自己的插件了。
