编写一个插件
2021-01-03 本文已影响0人
jluemmmm
插件向第三方开发者提供了 webpak引擎中完整的能力,使用阶段式的构造回调,开发者可以引入自己的行为到 webpack 构建流程中, 需要理解一些 webpack 底层的内部特性来做相应的钩子。
创建插件
webpack 插件由以下组成
- 一个js 命名函数
- 在插件函数的 prototype 上定义一个 apply 方法
- 指定一个绑定到 webpack 自身的事件钩子
- 处理 webpack 内部实例的特性数据
- 功能完成后调用 webpack 提供的回调
/* 一个 js 命名函数 */
function myExampleWebpackPlugin() {
}
/* 在插件函数的 prototype 上定义一个 apply 方法 */
myExampleWebpackPlugin.prototype.apply = function(compiler) {
/* 指定一个挂载到 webpack 自身的事件钩子 */
compiler.plugin('weboacksEventHook', function(compilation, callback) {
/* compilation 处理 webpack 内部实例的特定数据 */
console.log('this is an example plugin')
// 功能完成后调用 webpack 提供的回调
callback()
})
}
Compiler 和 Compilation
在插件开发中最重要的两个资源是 compiler 和 compilation 对象。理解他们是扩展 webpack 引擎重要的一步。
- compiler 对象的代表了完整的 webpack 环境配置,这个对象在启动 webpack 时被一次性建立,并配置好所有可操作的设置,包括 options,loader 和 plugin。当在 webpack 环境中应用一个插件时,插件将收到此 compiler 对象的引用,可以用它来访问 webpack 的主环境。
- compilation