目录
webpack插件机制
插件概念
Webpakck插件的基本模型
apply方法的由来
入参Compiler对象解释
区分Compilation 对象
Tapable & Tapable 实例
Plugin调用流程
开发调试Plugin&Loader
webpack插件机制
webpack 插件机制是整个 webpack 工具的骨架，而 webpack 本身也是利用这套插件机制构建出来的。
插件概念
专注处理 webpack 在编译过程中某个特定任务的功能模块，可以称为插件。最常见的如 html-webpack-plugin 。
那么怎么样的一个东西可以称之为 webpack 插件呢？一个完整的 webpack 插件需要满足以下几点规则和特征：
-
·是一个独立的模块。
-
·模块对外暴露一个 js 函数。
-
·函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply 方法。
-
·apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子，钩子的回调中能拿到当前编译的 compilation 对象，如果是异步编译插件的话可以拿到回调 callback。
-
·完成自定义子编译流程并处理 complition 对象的内部数据。
-
·如果异步编译插件的话，数据处理完成后执行 callback 回调。
Webpakck插件的基本模型
// 1、BasicPlugin.js 文件（独立模块）
// 2、模块对外暴露的 js 函数
class BasicPlugin{
//在构造函数中获取用户为该插件传入的配置
constructor(pluginOptions) {
this.options = pluginOptions;
}
//3、原型定义一个 apply 函数，并注入了 compiler 对象
apply(compiler) {
//4、挂载 webpack 事件钩子（这里挂载的是 emit 事件）
compiler.plugin('emit', function (compilation, callback) {
// ... 内部进行自定义的编译操作
// 5、操作 compilation 对象的内部数据
console.log(compilation);
// 6、执行 callback 回调
callback();
});
}
}
// 7、暴露 js 函数
module.exports = BasicPlugin;apply方法的由来
因为webpack中调用插件的方式就是plugin.apply()。
webpack部分源码：
https://github.com/webpack/webpack/blob/10282ea20648b465caec6448849f24fc34e1ba3e/lib/webpack.js#L35
const webpack = (options, callback) => {
...
for (const plugin of options.plugins) {
plugin.apply(compiler);
}
...
}
入参Compiler对象解释
compiler 对象是 webpack 的编译器对象，compiler 对象会在启动 webpack 的时候被一次性的初始化，compiler 对象中包含了所有 webpack 可自定义操作的配置，例如 loader 的配置，plugin 的配置，entry 的配置等各种原始 webpack 配置等。
在 webpack 插件中的自定义子编译流程中，我们肯定会用到 compiler 对象中的相关配置信息，我们相当于可以通过 compiler 对象拿到 webpack 的主环境所有的信息。
webpack部分源码：
https://github.com/webpack/webpack/blob/10282ea20648b465caec6448849f24fc34e1ba3e/lib/webpack.js#L30
// webpack/lib/webpack.js
const Compiler = require("./Compiler")
const webpack = (options, callback) => {
...
// 初始化 webpack 各配置参数
options = new WebpackOptionsDefaulter().process(options)
// 初始化 compiler 对象，这里 options.context 为 process.cwd()
let compiler = new Compiler(options.context)
// 往 compiler 添加初始化参数
compiler.options = options
// 往 compiler 添加 Node 环境相关方法
new NodeEnvironmentPlugin().apply(compiler)
for (const plugin of options.plugins) {
plugin.apply(compiler);
}
...
}区分Compilation 对象
compilation 实例继承于 compiler，compilation 对象代表了一次 单一版本 webpack 构建和生成编译资源
(编译资源是 webpack 通过配置生成的一份静态资源管理 Map（一切都在内存中保存），以 key-value 的形式描述一个 webpack 打包后的文件。编译资源就是这一个个 key-value 组成的 Map)
的过程。
当运行 webpack 开发环境中间件时，每当检测到一个文件变化，一次新的编译将被创建，从而生成一组新的编译资源以及新的 compilation 对象。
一个 compilation 对象包含了 当前的模块资源、编译生成资源、变化的文件、以及 被跟踪依赖的状态信息。编译对象也提供了很多关键点回调 供插件做自定义处理时选择使用。
Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只代表一次新的编译。
Tapable & Tapable 实例
webpack 的插件架构主要基于 Tapable 实现的，Tapable 是 webpack 项目组的一个内部库，主要是抽象了一套插件机制。
webpack 源代码中的一些 Tapable 实例都继承或混合了 Tapable 类。Tapable 能够让我们为 javaScript 模块添加并应用插件。它可以被其它模块继承或混合。它类似于 NodeJS 的 EventEmitter 类，专注于自定义事件的触发和操作。除此之外, Tapable 允许你通过回调函数的参数访问事件的生产者。
简单来说，就是我们熟悉的发布-订阅模式。这里暂不详细讲了，有点偏题～感兴趣的可以自行查找资料～
Plugin调用流程
1. 注册，类似于 EventEmitter 的 on
对应源码：
https://github.com/webpack/tapable/blob/42b520760e138c23e7808881cb4322557e878307/lib/Tapable.js#L35
compiler.plugin('emit', (compilation, callback) => {
// 在生成资源并输出到目录之前完成某些逻辑
})
// Tapable.js
options => {
...
if(hook !== undefined) {
const tapOpt = {
name: options.fn.name || "unnamed compat plugin",
stage: options.stage || 0
};
if(options.async)
// 将插件中 异步钩子的回调函数 注入
hook.tapAsync(tapOpt, options.fn);
else
hook.tap(tapOpt, options.fn);
return true;
}
};
2. 执行，类似于 EventEmitter 的emit
对应源码：
https://github.com/webpack/webpack/blob/e7c8fa414b718ac98d94a96e2553faceabfbc92f/lib/Compiler.js#L307
this.hooks.emit.callAsync(compilation, err => {
if (err) return callback(err);
outputPath = compilation.getPath(this.outputPath);
this.outputFileSystem.mkdirp(outputPath, emitFiles);
});开发调试Plugin&Loader
npm link
适合场景：Plugin&Loader
Npm link 专门用于开发和调试本地的 Npm 模块，能做到在不发布模块的情况下， 将本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下，让项目可以直接使 用本地的 Npm 模块。由于是通过软链接的方式实现的，编辑了本地的 Npm 模块的代码，所以在项目中也能使用到编辑后的代码。
-
确保正在开发的本地 Loader 模块的 package.json 已经配置好(最主要的main字段的入口文件指向要正确)
-
在本地的 Npm 模块根目录下执行 npm link，将本地模块注册到全局
-
在项目根目录下执行 npm link loader-name ，将第 2 步注册到全局的本地 Npm 模块链接到项目的 node moduels 下，其中的 loader-name 是指在第 1 步的package.json 文件中配置的模块名称
Resolveloader
适合场景：loader文章来源：https://www.toymoban.com/news/detail-600646.html
ResolveLoader 用于配置 Webpack 如何寻找 Loader ，它在默认情况下只会去 node_modules 目录下寻找。为了让 Webpack 加载放在本地项目中的 Loader, 需要修改 resolveLoader.modules。文章来源地址https://www.toymoban.com/news/detail-600646.html
//假设本地项目中的 Loader 在项目目录的 ./loaders/loader-name 下
module.exports = {
resolveLoader:{
//去哪些目录下寻找 Loader ，有先后顺序之分
modules :['node modules','./loaders/'],
}
}到了这里，关于webpack 插件机制分析及开发调试的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
