webpack中plugin原理解析

1. 作用

通过插件我们可以扩展 webpack，加入自定义的构建行为，使 webpack 可以执行更广泛的任务，拥有更强的构建能力

2. 工作原理

webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。

3. 开发一个webpack

``javascript
const path = require(‘path’)
// 定义一个注释插件类
class AnnotationPlugin {
constructor(opts) {
this.options = opts;
console.log(‘插件初始化’);
}
// apply为webpakc编译过程中调用的方法
apply(compiler) {
compiler.plugin(“emit”, (compilation, callback) => {
console.log(‘compilation’, compilation.assets)
const source = compilation.assets[‘dist.js’].source()
// // 拼接上注释
const prefix = /* *Author: sunlight原创所有 */
const content = prefix + source
compilation.assets[‘dist.js’] = {
// 最终资源输出时，调用source方法，source方法的返回值就是资源的具体内容
source() {
return content
},
// 资源大小
size() {
return content.length
}
}
callback()
})
}
}

module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘dist.js’
},
plugins: [
new AnnotationPlugin()
]
}
``
结果展示，插件中添加的注释已被添加到最前面