大前端工程化之写一个简单的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:\n\n';            // 遍历所有编译过的资源文件，        // 对于每个文件名称，都添加一行内容。        // 在这里我们可以做一些我们想做的事情        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插件，可以探讨一下??