我们经常使用到webpack的插件功能,那如何开发一个自定义的插件呢?首先创建插件比创建 loader 更加高级,webpack 插件由以下组成：
- 一个 JavaScript 命名函数。
- 在插件函数的 prototype 上定义一个 apply 方法。
- 指定一个绑定到 webpack 自身的事件钩子。
- 处理 webpack 内部实例的特定数据。
- 功能完成后调用 webpack 提供的回调。
下面就一点点的带你开发一个自定义的webpack plugin.
先说说webpack插件中的两位重要人物,Compiler和Compliation
- compiler 对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。当在 webpack 环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。
- compilation 对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。
基础插件架构
///src/plugins/helloPlugin.js
// 命名函数。
function HelloPlugin(options) {
// 使用 options 设置插件实例……
console.log(options);
}
//插件函数的 prototype 上定义一个 apply 方法
HelloPlugin.prototype.apply = compiler => {
//hooks
compiler.hooks.done.tap('HelloPlugin', status => {
console.log(status.toJson());
})
// 旧版本的相关钩子
//compiler.plugin('done' , () => {
// console.log('hello world');
//})
// 设置回调来访问 compilation 对象：
//compiler.plugin('compilation', compilation => {
// 现在，设置回调来访问 compilation 中的步骤：
// compilation.plugin('optimize', () => {
console.log('optimize');
//})
//})
}
module.exports = HelloPlugin
//webpack.config.js
const HelloPlugin = require('./src/plugins/helloPlugin')
plugins: [
new HelloPlugin({options:true})
]
这样基础架构就搭建完成了.
认识一下事件钩子
生命周期钩子函数，是由 compiler 暴露，可以通过如下方式访问：
compiler.hooks.someHook.tap(...)
取决于不同的钩子类型，也可以在某些钩子上访问 tapAsync 和 tapPromise。
例如
// 在处理来自webpack选项的entry配置后调用
compiler.hooks.entryOption.tap('HelloPlugin', (context, entry) => {
console.log(1,context, entry);
})
也支持自定义钩子函数
// 自定义hook
const SyncHook = require('tapable').SyncHook;
// 具有 `apply` 方法……
if (compiler.hooks.myCustomHook) throw new Error('Already in use');
compiler.hooks.myCustomHook = new SyncHook(['a', 'b', 'c'])
// 在你想要触发钩子的位置/时机下调用……
compiler.hooks.myCustomHook.call(a, b, c);
学会了webpack的事件生命周期钩子函数,那么下面我们就开始着手写一个webpack插件.
生成一个展示打包完成后的文件列表,ok,直接上代码
// 命名函数。
function HelloPlugin(options) {
// 使用 options 设置插件实例……
console.log(options);
}
//插件函数的 prototype 上定义一个 apply 方法
HelloPlugin.prototype.apply = compiler => {
// 在将资产释放到输出目录后调用。
compiler.hooks.emit.tapAsync('HelloPlugin', (compilation, callback) => {
let fileList = `## in this build:
`
console.log(compilation.assets);
const assets = compilation.assets
for(let key in assets){
console.log(key);
fileList+=`${key}
`
}
compilation.assets['fileList.md'] = {
source:()=>{return fileList},
size:() => {return fileList.length}
}
callback()
})
}
module.exports = HelloPlugin
看,根据不同的webpack生命周期事件钩子函数,处理不同的逻辑,就可以完成一个webpack的plugin了,你学会了吗?
关于深入学习请参考: