如需要阅读源码请访问github
插件目的在于解决 loader 无法实现的其他事。
插件
这里引用webpack官网的原文：
webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。插件有以下部分组成：
-
一个 JavaScript 命名函数。
-
在插件函数的 prototype 上定义一个 apply 方法。
-
指定一个绑定到 webpack 自身的事件钩子。
-
处理 webpack 内部实例的特定数据。
-
功能完成后调用 webpack 提供的回调。
-
通用格式
// 一个 JavaScript 命名函数。
function MyExampleWebpackPlugin() {
};
// 在插件函数的 prototype 上定义一个 `apply` 方法。
MyExampleWebpackPlugin.prototype.apply = function(compiler) {
// 指定一个挂载到 webpack 自身的事件钩子。
compiler.plugin('webpacksEventHook', function(compilation /* 处理 webpack 内部实例的特定数据。*/, callback) {
console.log("This is an example plugin!!!");
// 功能完成后调用 webpack 提供的回调。
callback();
});
};
自定义插件
编写一个简单的插件,终端运行git checkout v1.0.1
function HelloWorldPlugin(options) {
// 使用 options 设置插件实例……
}
HelloWorldPlugin.prototype.apply = function(compiler) {
compiler.plugin('done', function() {
console.log('Hello World!');
});
};
module.exports = HelloWorldPlugin;
运行npm run dev控制台打印输出：
[图片上传失败...(image-3af5c8-1577598140524)]
Compiler 和 Compilation
-
compiler对象代表了完整的 webpack 环境配置。这个对象在启动 webpack 时被一次性建立，并配置好所有可操作的设置，包括 options，loader 和 plugin。当在 webpack 环境中应用一个插件时，插件将收到此 compiler 对象的引用。可以使用它来访问 webpack 的主环境。 -
compilation对象代表了一次资源版本构建。当运行 webpack 开发环境中间件时，每当检测到一个文件变化，就会创建一个新的 compilation，从而生成一组新的编译资源。一个 compilation 对象表现了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。compilation 对象也提供了很多关键时机的回调，以供插件做自定义处理时选择使用。
对于学习插件最重要的就是学习这2个对象！
compiler钩子
以下是生命周期的钩子,你会发现在不同生命周期中，有些钩子是无法访问compilation对象的，要谨慎选择:
entryOption
SyncBailHook
在 entry 配置项处理过之后，执行插件。
afterPlugins
设置完初始插件之后，执行插件。
参数：compiler
afterResolvers
resolver 安装完成之后，执行插件。
environment
environment 准备好之后，执行插件。
afterEnvironment
environment 安装完成之后，执行插件。
beforeRun
compiler.run() 执行之前，添加一个钩子。
参数：compiler
run
开始读取 records 之前，钩入(hook into) compiler。
参数：compiler
watchRun
监听模式下，一个新的编译(compilation)触发之后，执行一个插件，但是是在实际编译开始之前。
参数：compiler
normalModuleFactory
NormalModuleFactory 创建之后，执行插件。
参数：normalModuleFactory
contextModuleFactory
ContextModuleFactory 创建之后，执行插件。
参数：contextModuleFactory
beforeCompile
编译(compilation)参数创建之后，执行插件。
参数：compilationParams
compile
一个新的编译(compilation)创建之后，钩入(hook into) compiler。
参数：compilationParams
thisCompilation
触发 compilation 事件之前执行（查看下面的 compilation）。
参数：compilation
compilation
编译(compilation)创建之后，执行插件。
参数：compilation
make
...
afterCompile
...
shouldEmit
此时返回 true/false。
参数：compilation
emit
生成资源到 output 目录之前。
参数：compilation
afterEmit
生成资源到 output 目录之后。
参数：compilation
done
编译(compilation)完成。
参数：stats
failed
编译(compilation)失败。
参数：error
invalid
监听模式下，编译无效时。
参数：fileName, changeTime
watchClose
监听模式停止。
网友评论