今天写一个简单的webpack插件,来学习一下webpack插件
webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化
首先我们得知道一个插件是如何组成的:
- 定义javascript命名函数
- 给这个函数的prototype添加apply方法
- 在这个方法内我们可以勾入webpack暴露的钩子,这些钩子主要由compiler,compilation两个对象暴露
- 在某个需要勾入的构建回调中加入自己的处理函数,处理需要处理的资源
- 处理完成后调用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插件,可以探讨一下