大前端工程化之写一个简单的webpack插件

今天写一个简单的webpack插件，来学习一下webpack插件

webpack插件机制可以使开发者在webpack构建过程中加入自己的行为，来针对自己项目中的一些需求做一些定制化

首先我们得知道一个插件是如何组成的：

1. 定义javascript命名函数
2. 给这个函数的prototype添加apply方法
3. 在这个方法内我们可以勾入webpack暴露的钩子，这些钩子主要由compiler，compilation两个对象暴露
4. 在某个需要勾入的构建回调中加入自己的处理函数，处理需要处理的资源
5. 处理完成后调用webpack提供的回调

上面提到的 compiler 和 compilation 是插件开发中用到的两个重要对象，我理解为compiler代表整个webpack的配置对象，在webpack启动时就建立，compilation代表单次构建的对象，每次文件的更改都会创建一个新的compilation对象，可能阐述的不是很完全，可以参照webpack官方文档

compiler 和 compilation 这两个对象都扩展自Tapable类，在触碰他们的钩子时根据钩子触发的时机调用不同的方法，主要有tap，tapAsync，tapPromise三个方法，调用形式都是

compilation.hooks.someHook.tap(/* ... */);

说了这么多，可以通过代码加深一下印象，来加深一下插件基本的组成和使用

// webpack插件先定义一个js函数 function MyPlugin(options) {  }  // 然后在这个函数的prototype添加apply方法 MyPlugin.prototype.apply = function (compiler) {     compiler.hooks.emit.tapAsync('MyPlugin',function(compilation, callback) {         // 在生成文件中，创建一个头部字符串：         var filelist = 'In this build:nn';              // 遍历所有编译过的资源文件，         // 对于每个文件名称，都添加一行内容。         // 在这里我们可以做一些我们想做的事情         for (var filename in compilation.assets) {           filelist += ('- '+ filename +'n');         }              // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：         compilation.assets['filelist.md'] = {           source: function() {             return filelist;           },           size: function() {             return filelist.length;           }         };              callback();       }); }  module.exports = MyPlugin

const path = require('path') const MyPlugin = require('./js/plugins/myPlugin')  module.exports = {     entry: {         main: './js/main',         index:'./js/index'     },     output: {         filename:'[name]-[hash].js',         path:path.join(__dirname,'dist')     },     plugins:[         new MyPlugin() //此处调用插件     ] }

 大家有么有在项目中有自己写过webpack插件，可以探讨一下?