当前位置: 首页 > news >正文

Webpack5入门到原理18:Plugin 原理

Plugin 的作用

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

Plugin 工作原理

webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。
插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。
webpack 的事件流机制保证了插件的有序性,使得整个系统扩展性很好。
——「深入浅出 Webpack」

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

Webpack 内部的钩子

什么是钩子

钩子的本质就是:事件。为了方便我们直接介入和控制编译过程,webpack 把编译过程中触发的各类关键事件封装成事件接口暴露了出来。这些接口被很形象地称做:hooks(钩子)。开发插件,离不开这些钩子。

Tapable

Tapable 为 webpack 提供了统一的插件接口(钩子)类型定义,它是 webpack 的核心功能库。webpack 中目前有十种 hooks,在 Tapable 源码中可以看到,他们是:

// https://github.com/webpack/tapable/blob/master/lib/index.js
exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesLoopHook = require("./AsyncSeriesLoopHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");

Plugin 构建对象

Compiler

compiler 对象中保存着完整的 Webpack 环境配置,每次启动 webpack 构建时它都是一个独一无二,仅仅会创建一次的对象。

这个对象会在首次启动 Webpack 时创建,我们可以通过 compiler 对象上访问到 Webapck 的主环境配置,比如 loader 、 plugin 等等配置信息。

它有以下主要属性:

  • compiler.options 可以访问本次启动 webpack 时候所有的配置文件,包括但不限于 loaders 、 entry 、 output 、 plugin 等等完整配置信息。
  • compiler.inputFileSystem 和 compiler.outputFileSystem 可以进行文件操作,相当于 Nodejs 中 fs。
  • compiler.hooks 可以注册 tapable 的不同种类 Hook,从而可以在 compiler 生命周期中植入不同的逻辑。

compiler hooks 文档

Compilation

compilation 对象代表一次资源的构建,compilation 实例能够访问所有的模块和它们的依赖。

一个 compilation 对象会对构建依赖图中所有模块,进行编译。 在编译阶段,模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)。

它有以下主要属性:

  • compilation.modules 可以访问所有模块,打包的每一个文件都是一个模块。
  • compilation.chunks chunk 即是多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个 chunk,通过代码分割的模块又是另外的 chunk。
  • compilation.assets 可以访问本次打包生成所有文件的结果。
  • compilation.hooks 可以注册 tapable 的不同种类 Hook,用于在 compilation 编译模块阶段进行逻辑添加以及修改。

compilation hooks 文档

开发一个插件

最简单的插件

plugins/test-plugin.js

class TestPlugin {constructor() {console.log("TestPlugin constructor()");}// 1. webpack读取配置时,new TestPlugin() ,会执行插件 constructor 方法// 2. webpack创建 compiler 对象// 3. 遍历所有插件,调用插件的 apply 方法apply(compiler) {console.log("TestPlugin apply()");}
}module.exports = TestPlugin;

注册 hook

class TestPlugin {constructor() {console.log("TestPlugin constructor()");}// 1. webpack读取配置时,new TestPlugin() ,会执行插件 constructor 方法// 2. webpack创建 compiler 对象// 3. 遍历所有插件,调用插件的 apply 方法apply(compiler) {console.log("TestPlugin apply()");// 从文档可知, compile hook 是 SyncHook, 也就是同步钩子, 只能用tap注册compiler.hooks.compile.tap("TestPlugin", (compilationParams) => {console.log("compiler.compile()");});// 从文档可知, make 是 AsyncParallelHook, 也就是异步并行钩子, 特点就是异步任务同时执行// 可以使用 tap、tapAsync、tapPromise 注册。// 如果使用tap注册的话,进行异步操作是不会等待异步操作执行完成的。compiler.hooks.make.tap("TestPlugin", (compilation) => {setTimeout(() => {console.log("compiler.make() 111");}, 2000);});// 使用tapAsync、tapPromise注册,进行异步操作会等异步操作做完再继续往下执行compiler.hooks.make.tapAsync("TestPlugin", (compilation, callback) => {setTimeout(() => {console.log("compiler.make() 222");// 必须调用callback();}, 1000);});compiler.hooks.make.tapPromise("TestPlugin", (compilation) => {console.log("compiler.make() 333");// 必须返回promisereturn new Promise((resolve) => {resolve();});});// 从文档可知, emit 是 AsyncSeriesHook, 也就是异步串行钩子,特点就是异步任务顺序执行compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {setTimeout(() => {console.log("compiler.emit() 111");callback();}, 3000);});compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {setTimeout(() => {console.log("compiler.emit() 222");callback();}, 2000);});compiler.hooks.emit.tapAsync("TestPlugin", (compilation, callback) => {setTimeout(() => {console.log("compiler.emit() 333");callback();}, 1000);});}
}module.exports = TestPlugin;

启动调试

通过调试查看 compiler 和 compilation 对象数据情况。

package.json 配置指令

{"name": "source","version": "1.0.0","scripts": {"debug": "node --inspect-brk ./node_modules/webpack-cli/bin/cli.js"},"keywords": [],"author": "xiongjian","license": "ISC","devDependencies": {"@babel/core": "^7.17.10","@babel/preset-env": "^7.17.10","css-loader": "^6.7.1","loader-utils": "^3.2.0","webpack": "^5.72.0","webpack-cli": "^4.9.2"}
}

运行指令

npm run debug

此时控制台输出以下内容:

PS C:\Users\86176\Desktop\source> npm run debug> source@1.0.0 debug
> node --inspect-brk ./node_modules/webpack-cli/bin/cli.jsDebugger listening on ws://127.0.0.1:9229/629ea097-7b52-4011-93a7-02f83c75c797
For help, see: https://nodejs.org/en/docs/inspecto

打开 Chrome 浏览器,F12 打开浏览器调试控制台。

此时控制台会显示一个绿色的图标

调试控制台

点击绿色的图标进入调试模式。

在需要调试代码处用 debugger 打断点,代码就会停止运行,从而调试查看数据情况。

BannerWebpackPlugin

作用:给打包输出文件添加注释。

开发思路:

需要打包输出前添加注释:需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发。

如何获取打包输出的资源?compilation.assets 可以获取所有即将输出的资源文件。

实现:

// plugins/banner-webpack-plugin.js
class BannerWebpackPlugin {constructor(options = {}) {this.options = options;}apply(compiler) {// 需要处理文件const extensions = ["js", "css"];// emit是异步串行钩子compiler.hooks.emit.tapAsync("BannerWebpackPlugin", (compilation, callback) => {// compilation.assets包含所有即将输出的资源// 通过过滤只保留需要处理的文件const assetPaths = Object.keys(compilation.assets).filter((path) => {const splitted = path.split(".");return extensions.includes(splitted[splitted.length - 1]);});assetPaths.forEach((assetPath) => {const asset = compilation.assets[assetPath];const source = `/*
* Author: ${this.options.author}
*/\n${asset.source()}`;// 覆盖资源compilation.assets[assetPath] = {// 资源内容source() {return source;},// 资源大小size() {return source.length;},};});callback();});}
}module.exports = BannerWebpackPlugin;

CleanWebpackPlugin

作用:在 webpack 打包输出前将上次打包内容清空。

开发思路:

  1. 如何在打包输出前执行?需要使用 compiler.hooks.emit 钩子, 它是打包输出前触发。
  2. 如何清空上次打包内容?
  • 获取打包输出目录:通过 compiler 对象。
  • 通过文件操作清空内容:通过 compiler.outputFileSystem 操作文件。

实现:

// plugins/clean-webpack-plugin.js
class CleanWebpackPlugin {apply(compiler) {// 获取操作文件的对象const fs = compiler.outputFileSystem;// emit是异步串行钩子compiler.hooks.emit.tapAsync("CleanWebpackPlugin", (compilation, callback) => {// 获取输出文件目录const outputPath = compiler.options.output.path;// 删除目录所有文件const err = this.removeFiles(fs, outputPath);// 执行成功err为undefined,执行失败err就是错误原因callback(err);});}removeFiles(fs, path) {try {// 读取当前目录下所有文件const files = fs.readdirSync(path);// 遍历文件,删除files.forEach((file) => {// 获取文件完整路径const filePath = `${path}/${file}`;// 分析文件const fileStat = fs.statSync(filePath);// 判断是否是文件夹if (fileStat.isDirectory()) {// 是文件夹需要递归遍历删除下面所有文件this.removeFiles(fs, filePath);} else {// 不是文件夹就是文件,直接删除fs.unlinkSync(filePath);}});// 最后删除当前目录fs.rmdirSync(path);} catch (e) {// 将产生的错误返回出去return e;}}
}module.exports = CleanWebpackPlugin;

AnalyzeWebpackPlugin

作用:分析 webpack 打包资源大小,并输出分析文件。

开发思路:

在哪做? compiler.hooks.emit, 它是在打包输出前触发,我们需要分析资源大小同时添加上分析后的 md 文件。

实现:

// plugins/analyze-webpack-plugin.js
class AnalyzeWebpackPlugin {apply(compiler) {// emit是异步串行钩子compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {// Object.entries将对象变成二维数组。二维数组中第一项值是key,第二项值是valueconst assets = Object.entries(compilation.assets);let source = "# 分析打包资源大小 \n| 名称 | 大小 |\n| --- | --- |";assets.forEach(([filename, file]) => {source += `\n| ${filename} | ${file.size()} |`;});// 添加资源compilation.assets["analyze.md"] = {source() {return source;},size() {return source.length;},};});}
}module.exports = AnalyzeWebpackPlugin;

InlineChunkWebpackPlugin

作用:webpack 打包生成的 runtime 文件太小了,额外发送请求性能不好,所以需要将其内联到 js 中,从而减少请求数量。

开发思路:

1、我们需要借助 html-webpack-plugin 来实现

  • 在 html-webpack-plugin 输出 index.html 前将内联 runtime 注入进去
  • 删除多余的 runtime 文件

2、如何操作 html-webpack-plugin?官方文档

实现:

// plugins/inline-chunk-webpack-plugin.js
const HtmlWebpackPlugin = require("safe-require")("html-webpack-plugin");class InlineChunkWebpackPlugin {constructor(tests) {this.tests = tests;}apply(compiler) {compiler.hooks.compilation.tap("InlineChunkWebpackPlugin", (compilation) => {const hooks = HtmlWebpackPlugin.getHooks(compilation);hooks.alterAssetTagGroups.tap("InlineChunkWebpackPlugin", (assets) => {assets.headTags = this.getInlineTag(assets.headTags, compilation.assets);assets.bodyTags = this.getInlineTag(assets.bodyTags, compilation.assets);});hooks.afterEmit.tap("InlineChunkHtmlPlugin", () => {Object.keys(compilation.assets).forEach((assetName) => {if (this.tests.some((test) => assetName.match(test))) {delete compilation.assets[assetName];}});});});}getInlineTag(tags, assets) {return tags.map((tag) => {if (tag.tagName !== "script") return tag;const scriptName = tag.attributes.src;if (!this.tests.some((test) => scriptName.match(test))) return tag;return { tagName: "script", innerHTML: assets[scriptName].source(), closeTag: true };});}
}module.exports = InlineChunkWebpackPlugin;

相关文章:

Webpack5入门到原理18:Plugin 原理

Plugin 的作用 通过插件我们可以扩展 webpack,加入自定义的构建行为,使 webpack 可以执行更广泛的任务,拥有更强的构建能力。 Plugin 工作原理 webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条…...

PWM之舵机

舵机又称直流电机,如下图 本节承接上节,具体的PWM技术已经在上一节讲的很详细了,本节就不再讲了,那么我们的重点就放在直流电机的工作原理上了。 一、工作原理 我们研究直流电机,主要式研究直流电机旋转速度的调节&a…...

Python并发与多线程:IO并发(阻塞IO、非阻塞IO、IO多路复用、异步IO)

在Python中,有多种处理并发的方式,其中之一就是使用多线程进行IO并发操作。在IO操作中,有四种常见的方式:阻塞IO、非阻塞IO、IO多路复用和异步IO。 阻塞IO(Blocking IO):当执行一个IO操作时&…...

React16源码: React中的IndeterminateComponent的源码实现

IndeterminateComponent 1 )概述 这是一个比较特殊的component的类型, 就是还没有被指定类型的component在一个fibrer被创建的时候,它的tag可能会是 IndeterminateComponent在 packages/react-reconciler/src/ReactFiber.js 中,有…...

SpringBoot:详解Bean生命周期和作用域

🏡浩泽学编程:个人主页 🔥 推荐专栏:《深入浅出SpringBoot》《java项目分享》 《RabbitMQ》《Spring》《SpringMVC》 🛸学无止境,不骄不躁,知行合一 文章目录 前言一、生命周期二…...

【图解数据结构】顺序表实战指南:手把手教你详细实现(超详细解析)

🌈个人主页:聆风吟 🔥系列专栏:图解数据结构、算法模板 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 一. ⛳️线性表1.1 🔔线性表的定义1.2 🔔线性表的存储结构 二. ⛳️顺序表…...

WordPress怎么禁用文章和页面古腾堡块编辑器?如何恢复经典小工具?

现在下载WordPress最新版来搭建网站,默认的文章和页面编辑器,以及小工具都是使用古腾堡编辑器(Gutenberg块编辑器)。虽然有很多站长说这个编辑器很好用,但是仍然有很多站长用不习惯,觉得操作太难了&#xf…...

【HarmonyOS】掌握布局组件,提升应用体验

从今天开始,博主将开设一门新的专栏用来讲解市面上比较热门的技术 “鸿蒙开发”,对于刚接触这项技术的小伙伴在学习鸿蒙开发之前,有必要先了解一下鸿蒙,从你的角度来讲,你认为什么是鸿蒙呢?它出现的意义又是…...

第4周:Pytorch——综合应用和实战项目 Day 28-30: 学习资源和社区参与

第4周:综合应用和实战项目 Day 28-30: 学习资源和社区参与 在这个阶段,我们将探索更多的学习资源并鼓励参与PyTorch和TensorFlow的社区,以进一步提升技术和融入开发者社群。 学习资源: 论文:阅读最新的机器学习和深度…...

TypeScript教程(一)在vscode中的配置TypeScript环境

TypeScript教程(一)在vscode中的配置TypeScript环境 文章目录 TypeScript教程(一)在vscode中的配置TypeScript环境一、前言二、具体步骤1、Node.js安装2、TypeScript安装3、helloworld 一、前言 未来的开发者们请上座&#xff0c…...

sshpass的安装与使用

一.简介 1.定义: ssh 登陆不能在命令行中指定密码,sshpass 的出现则解决了这一问题。它允许你用 -p 参数指定明文密码,然后直接登录远程服务器,它支持密码从命令行、文件、环境变量中读取。 2.使用 sshpass 原因 使用 sshpass…...

Excel·VBA合并工作簿2

其他合并工作簿的方法,见之前的文章《ExcelVBA合并工作簿》 目录 8,合并文件夹下所有工作簿中所有工作表,按表头汇总举例 8,合并文件夹下所有工作簿中所有工作表,按表头汇总 与之前的文章《ExcelVBA合并工作簿&#x…...

linux内核原理--分页,页表,内核线性地址空间,伙伴系统,内核不连续页框分配,内核态小块内存分配器

1.分页,页表 linux启动阶段,最初运行于实模式,此阶段利用段寄存器,段内偏移,计算得到物理地址直接访问物理内存。 内核启动后期会切换到保护模式,此阶段会开启分页机制。一旦开启分页机制后,内…...

【MongoDB】下载安装、指令操作

目录 1.下载安装 2.指令 2.1.基础操作指令 2.2.增加 2.3.查询 2.4.修改 2.5.删除 前言: 关于MongoDB的核心概念请移步: 【文档数据库】ES和MongoDB的对比-CSDN博客 1.下载安装 本文以安装Windows版本的mongodb为例,Linux版本的其实…...

k8s-pvc/pv扩容记录

背景 一次聊天过程中,对方提及pvc的扩容,虽然有注意过 storageclass 有个AllowVolumeExpansion的配置(有些csi插件是不支持该配置的,比如local-volume-provisoner),但是没有实际用过,所以还是心…...

关于Unity插件TriLib使用的一点儿心得

最近做一个项目的时候,由于要求动态加载fbx或者glb等格式文件,而我们自己开发加载插件难度又有点大,所以最后使用了TriLib这个插件,现在说一点使用心得。 由于文件加载之后要对加载的内容进行复制,比如加载一个柱子&am…...

计算机二级Python基本排序题-序号45(补充)

1. 文件"singup.txt”中保存了若干条参加运动会学生的报名记录,每条记录的形式为“班级号_学号”,例如"A1_12”,将每个班级报名情按参加运动会人数从多到少排列(假设不存在人数相同的情况)并输出&#xff0c…...

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-6 fieldset

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>fieldset</title> </head><body> <form action"#"><fieldset><legend>学生信息</legend>姓名&#xff1a;&…...

html渲染优先级

在前端开发中&#xff0c;优先布局是指在设计和构建页面时&#xff0c;将页面的各个部分按照其重要性和优先级进行排序&#xff0c;并依次进行布局和开发。这种方法可以帮助开发团队在项目初期就确定页面结构的核心部分&#xff0c;从而更好地掌控项目的整体进度和优先级。且确…...

linux 更新镜像源

打开终端&#xff0c;备份一下旧的 源 文件&#xff0c;以防万一 cd /etc/apt/ ls sudo cp sources.list sources.list.bak ls然后打开清华大学开源软件镜像站 搜索一下你的linux发行版本&#xff0c;我这里是ubuntu发行版本 点击这个上面图中的问号 查看一下自己的版本号&a…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...