一个 webpack plugin 基本包含以下几步:
- 一个 JavaScript 函数或者类
- 在函数原型(prototype)中定义一个注入compiler对象的apply方法。
- apply函数中通过compiler插入指定的事件钩子,在钩子回调中拿到compilation对象
- 使用compilation操纵修改webapack内部实例数据。
- 异步插件,数据处理完后使用callback回调
最后会实现一个简单的 clean-webpack-plugin。
class WebpackCleanupPlugin {
// 构造函数
constructor(options) {
console.log("WebpackCleanupPlugin", options);
}
// 应用函数
apply(compiler) {
console.log(compiler);
// 绑定钩子事件
compiler.plugin("done", compilation => {
console.log(compilation);
});
}
}
Compiler 对象包含了 Webpack 环境所有的的配置信息,包含 options,hook,loaders,plugins 这些信息,这个对象在 Webpack 启动时候被实例化,它是全局唯一的,可以简单地把它理解为 Webpack 实例
Compilation 对象包含了当前的模块资源、编译生成资源、变化的文件等。当 Webpack 以开发模式运行时,每当检测到一个文件变化,一次新的 Compilation 将被创建。Compilation 对象也提供了很多事件回调供插件做扩展。通过 Compilation 也能读取到 Compiler 对象。
Compiler 和 Compilation 的区别在于:Compiler 代表了整个 Webpack 从启动到关闭的生命周期,而 Compilation 只是代表了一次新的编译。
参考资料:
http://webpack.wuhaolin.cn/
https://juejin.cn/post/6844903935837208584#comment