作为先进最为流行的前端构建工具之一，webpack成为了前端开发必须掌握的技能。其诸多的插件为我们的工作带来了大大的便利，本文将对webpack plugin的基本原理以及编写方式做一个介绍。编写插件需要对webpack的底层特性有一定的了解，本文中也会对这些内容做一些基本介绍。
后文的介绍和样例代码编写所对应的webpack版本号为4.35.0
创建一个最基础的Plugin
首先我们不来扯别的原理，先来看看一个最为基本的webpack plugin结构。
// 声明一个js函数
function ExamplePlugin(option) {
this.option = option
}
// 在函数的原型上声明一个apply方法
ExamplePlugin.prototype.apply = function(compiler) {}
你也可以采用ES6来进行编写
// 采用ES6
class ExamplePlugin {
constructor(option) {
this.option = option
}
apply(compiler) {}
}
以上就是一个最为基本的plugin结构。webpack plugin最为核心的便是这个apply方法。
webpack执行时，先生成了插件的实例对象，之后会调用插件上的apply方法，并将compiler对象(webpack实例对象，包含了webpack的各种配置信息...)作为参数传递给apply。
之后我们便可以在apply方法中使用compiler对象去监听webpack在不同时刻触发的各种事件来进行我们想要的操作了。
接下来看一个简单的示例
class plugin1 {
constructor(option) {
this.option = option
console.log(option.name + '初始化')
}
apply(compiler) {
console.log(this.option.name + ' apply被调用')
//在webpack的emit生命周期上添加一个方法
compiler.hooks.emit.tap('plugin1', (compilation) => {
console.log('生成资源到 output 目录之前执行的生命周期')
})
}
}
class plugin2 {
constructor(option) {
this.option = option
console.log(option.name + '初始化')
}
apply(compiler) {
console.log(this.option.name + ' apply被调用')
//在webpack的afterPlugins生命周期上添加一个方法
compiler.hooks.afterPlugins.tap('plugin2', (compilation) => {
console.log('webpack设置完初始插件之后执行的生命周期')
})
}
}
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
plugins: [
new plugin1({ name: 'plugin1' }),
new plugin2({ name: 'plugin2' })
]
}
//执行webpack命令后输出结果如下:
/*
plugin1初始化
plugin2初始化
plugin1 apply被调用
plugin2 apply被调用
webpack设置完初始插件之后执行的生命周期
生成资源到 output 目录之前执行的生命周期
*/
首先webpack会按顺序实例化plugin对象，之后再依次调用plugin对象上的apply方法。
也就是对应输出 plugin1初始化、plugin2初始化、 plugin1 apply被调用、plugin2 apply被调用。
在webpack源代码中我们也可以看到这么一行，options.plugins便是配置文件中的被实例化的plugin数组。
插件中的apply被调用，对应源码目录lib/webpack.js
之前我们也提到了，webpack在运行过程中会触发各种事件，而在apply方法中我们能接收一个compiler对象，我们可以通过这个对象监听到webpack触发各种事件的时刻，然后执行对应的操作函数。这套机制类似于Node.js的EventEmitter，总的来说就是一个发布订阅模式。
compiler.hooks中定义了各式各样的事件钩子，这些钩子会在不同的时机被执行。而上文中的compiler.hooks.emit和compiler.hooks.afterPlugin这两个生命周期钩子，分别对应了设置完初始插件以及生成资源到 output 目录之前这两个时间节点，afterPlugin是在emit之前被触发的，所以输出顺序更靠前。
compiler对象上具体的钩子也可以查看官方文档 compiler钩子。
在继续记下来的内容之前，我们先来对compiler和compilation做一个更为详细的介绍。
compiler和compilation介绍
webpack的compiler模块是其核心部分。其包含了webpack配置文件传递的所有选项，包含了诸如loader、plugins等信息。
我们可以看看Compiler类中定义的一些核心方法。
//继承自Tapable类，使得自身拥有发布订阅的能力
class Compiler extends Tapable {
//构造函数，context实际传入值为process.cwd()，代表当前的工作目录
constructor(context) {
super();
// 定义了一系列的事件钩子，分别在不同的时刻触发
this.hooks = {
shouldEmit: new SyncBailHook(["compilation"]),
done: new AsyncSeriesHook(["stats"]),
//....更多钩子
};
this.running = true;
//其他一些变量声明
}
//调用该方法之后会监听文件变更，一旦变更则重新执行编译
watch(watchOptions, handler) {
this.running = true;
return new Watching(this, watchOptions, handler)
}
//用于触发编译时所有的工作
run(callback) {
//编译之后的处理，省略了部分代码
const onCompiled = (err, compilation) => {
this.emitAssets(compilation, err => {...})
}
}
//负责将编译输出的文件写入本地
emitAssets(compilation, callback) {}
//创建一个compilation对象，并将compiler自身作为参数传递
createCompilation() {
return new Compilation(this);
}
//触发编译，在内部创建compilation实例并执行相应操作
compile() {}
//以上核心方法中很多会通过this.hooks.someHooks.call来触发指定的事件
}
可以看到，compiler中设置了一系列的事件钩子和各种配置参数，并定义了webpack诸如启动编译、观测文件变动、将编译结果文件写入本地等一系列核心方法。在plugin执行的相应工作中我们肯定会需要通过compiler拿到webpack的各种信息。
接下来看看compilation
如果把compiler算作是总控制台，那么compilation则专注于编译处理这件事上。
在启用Watch模式后，webpack将会监听文件是否发生变化，每当检测到文件发生变化，将会执行一次新的编译，并同时生成新的编译资源和新的compilation对象。
compilation对象中包含了模块资源、编译生成资源以及变化的文件和被跟踪依赖的状态信息等等，以供插件工作时使用。如果我们在插件中需要完成一个自定义的编译过程，那么必然会用到这个对象。
tips: 在webpack-dev-server和webpack-dev-middleware里Watch模式默认开启
插件编写示例
首先看一个插件示例，这个插件在我们构建完相关的文件后，会输出一个记录所有构建文件名的filelist.md文件。
class myPlugin {
constructor(option) {
this.option = option
}
apply(compiler) {
compiler.hooks.emit.tap('myPlugin', compilation => {
let filelist = '构建后的文件: \n'
for (var filename in compilation.assets) {
filelist += '- ' + filename + '\n';
}
compilation.assets['filelist.md'] = {
source: function() {
return filelist
},
size: function() {
return filelist.length
}
}
})
}
}
在webpack的emit事件被触发之后，我们的插件会执行指定的工作，并将包含了编译生成资源的compilation作为参数传入了函数。我们可以通过compilation.assets拿到生成的文件，并获取其中的filename值。
同样的，我们也可以获取到构建后的文件内容。
接下来我们编写一个插件，将编译后的.js和.css文件进行gzip压缩。
const zlib = require('zlib')
class gzipPlugin {
constructor(option) {
this.option = option
}
apply(compiler) {
compiler.hooks.emit.tap('myPlugin', compilation => {
for (var filename in compilation.assets) {
if (/(.js|.css)/.test(filename)) {
const gzipFile = zlib.gzipSync(compilation.assets[filename]._value, {
//压缩等级
level: this.option.level || 7
})
compilation.assets[filename + '.gz'] = {
source: function () {
return gzipFile
},
size: function () {
return gzipFile.length
}
}
}
}
})
}
}
//webpack.config.js中调用
{
...
plugins: [
new gzipPlugin({
//设置压缩等级
level: 9
})
]
}
在这个插件中，我们同样监听compiler的emit事件，通过compilation.assets[filename]._value拿到文件内容，之后通过node自带的zlib库便可生成gzip文件了。
压缩后结果如下：
js文件压缩结果
css文件压缩结果
关于gzip的更多实践内容，可以去这篇文章查看 gzip压缩实践
异步事件钩子
webpack有些事件钩子是支持异步的。
具体可以通过tapAsync或者tapPromise来实现，接下来看分别看一个示例。
class AsyncPlugin {
apply(compiler) {
compiler.hooks.emit.tapAsync('asyncEmit', (compilation, callback) => {
console.log('asyncEmit')
setTimeout(() => {
//异步完成后调用callback函数以继续流程
callback()
}, 2000)
})
}
}
class LogPlugin {
apply(compiler) {
compiler.hooks.emit.tapAsync('log', (compilation, callback) => {
console.log('LogPlugin')
})
compiler.hooks.done.tap('done', () => {
console.log('done')
})
}
}
//webpack.config.js中调用
{
//...
plugins: [
new AsyncPlugin(),
new LogPlugin()
]
}
以上代码输出顺序如下：asyncEmit，2秒后输出LogPlugin，紧跟着输出done。
使用tapPromise也同理，只需稍稍改变一下写法即可：
class AsyncPlugin {
apply(compiler) {
compiler.hooks.emit.tapPromise('asyncEmit', compilation => {
// 返回一个 Promise，在我们的异步任务完成时 resolve……
return new Promise((resolve, reject) => {
setTimeout(function() {
console.log('异步工作完成……')
resolve()
}, 1000);
})
})
}
}
结合Tapable在插件中使用自定义事件
Tapable是一个小型的库，类似于Node.js的EventEmitter类，负责自定义事件的注册和触发。
const {SyncHook} = require('tapable')
class MainPlugin {
apply(compiler) {
//在hooks上自定义一个名为mainPlugin的钩子
compiler.hooks.mainPlugin = new SyncHook(['data'])
//在webpack的environment事件触发时，广播自定义的mainPlugin事件，并传参
compiler.hooks.environment.tap('mainPlugin', (compilation) => {
compiler.hooks.mainPlugin.call({
text: 'MainPlugin Call'
})
})
}
}
class ListenPlugin {
apply(compiler) {
//监听自定义的mainPlugin被触发后，执行对应的函数，输出data.text
compiler.hooks.mainPlugin.tap('listenPlugin', (data) => {
console.log(data.text)
})
}
}
//在webpack.config.js中引用
{
// ...
plugins: [
new MainPlugin(),
new ListenPlugin()
]
}
可以看到，借助tapable我们可以在webpack插件中自定义一些事件，用来进行特定的操作。插件之间也可以通过自定义事件互相调用部分逻辑。
webpack自身的compiler、complation类也是继承自tapable来实现自身事件的注册和触发的。
通过以上的学习，我们接下来对上面的内容进行一个小小的总结。
1. webpack插件本质上是一个函数，它的原型上存在一个名为apply函数。webpack在初始化时 (在最早触发的environment事件之前) 会执行这个函数，并将一个包含了webpack所有配置信息的compiler作为参数传递给apply函数。
2. 插件可以通过监听webpack本身触发的事件，在不同的时间阶段介入进行你想做的操作。
3. 通过获取到的compiler对象，我们可以结合tapable在插件中自定义事件并将其广播。
4. 在插件中监听一些特定的事件 (thisCompilation到afterEmit这个阶段的事件)，你可以拿到一个compilation对象，里面包含了各种编译资源，你可以通过操作这个对象对生成的资源进行添加和修改等操作。
通过上面的学习，相信大家插件的编写和大致原理有了一定的了解和认识。
webpack执行流程
最后我们来对webpack本身的执行流程进行一个概述，并将其和compiler事件钩子的触发时机进行一个对照。
webpack流程
webpack首先会读取配置文件，创建compiler对象，之后调用所有插件中的apply方法，并将参数传入其中。
在完成之后会广播environment这个事件钩子。然后读取配置文件的entry属性，遍历所有入口js文件。
接下来compiler对象会调用run方法，正式开始启动各方面的工作。
webpack开始为创建compilation对象做准备工作，首先会调用一个newCompilationParams方法，创建compilation对象所需的参数，紧接着立刻广播beforeCompile和compile这两个事件。之后compilation对象被创建，并广播compilation和make事件。
webpack接下来就开始了编译相关的工作。调用loader处理各模块之间的依赖，对每一个require调用对应的loader进行加工，再将加工后的文件处理生成AST抽象语法树并遍历这颗抽象语法树，构建该模块所依赖的模块。最后再将所有模块中的require语法转换成 __webpack_require__。
以上步骤完成之后webpack会触发emit事件，你可以在这个事件中通过compilation.assets拿到生成的各种资源。最后，webpack通过compiler的emitAssets方法将文件输出到对应的构建目录中，操作完成。
本文篇幅有限，对webpack流程只是进行了一个简单的介绍，但通过对流程的学习和了解，你能够更合理地运用、编写插件。
以上是这篇文章的全部内容，希望对您有所帮助。
参考文献
网友评论