webpack的loader机制

news2024/10/1 7:36:29

webpack的loader机制

loader本质上就是导出函数的JavaScript模块。导出的函数,可以用来实现内容的转换。

/*
* @param{string|Buffer} content 源文件的内容
* @param{object} [map] SourceMap数据
* @param{any} [meta] meta数据,可以是任何数据
* */
function webpackloader(context, map, meta) {
    
}

module.exports = webpackloader()

Normal Loader

Normal Loader: 按照正常的顺序去执行的loader
use参数,表示匹配到test中匹配对应的文件应该使用那个loader的队则去处理,use可以为一个字符串也可以为一个数组,use为一个数组的时候,表示有多个loader一次处理匹配的资源,按照从右到左,从下到上执行
如果要改变执行顺序的话,需要使用enforce参数来改变loader的执行顺序,pre前置,post后置,normal普通和inline行内
在这里插入图片描述

在这里插入图片描述

Pitching Loader

在webpack的loader中配置pitch属性,支持三个参数

/*
* @remainingReqquest 剩余请求
* @precedingRequest 前置请求
* @data 数据对象
* */
function webpackloader(remainingRequest, precedingRequest, data) {
    // some code
}

data用于数据参数,在pitch函数中往data对象上添加数据,之后在normal函数中通过this.data的方法读取已经添加的数据。
remainingRequest 表示在当前 loader 处理完毕后,还需要被后续 loader 处理的请求字符串。这个字符串由剩余的 loader 路径以 ! 分隔符组成,从右到左排列。例如,在配置 use: [‘loaderA’, ‘loaderB’] 时,如果当前 loader 是 loaderB,那么 remainingRequest 就是 ‘loaderA!’(如果还有其他 loader,则继续以 ! 分隔)。
precedingRequest 表示在 pitch 阶段已经迭代过的 loader 路径字符串,同样以 ! 分隔符组成。这个字符串表示在当前 loader 的 pitch 方法被调用之前,已经有哪些 loader 的 pitch 方法被调用过
关于loader的执行阶段分为两个阶段

  • 在处理资源文件之前,会经历pitch阶段
  • pitch结束之后,读取资源文件内容
  • 经过pitch处理后,读取到了资源文件,此时才会将读取到的资源文件内容交给正常的loader进行处理
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['normal1-loader', 'normal2-loader']
            },
            {
                test: /\.js$/,
                use: ['pre1-loader', 'pre2-loader'],
                enforce: 'pre'
            },
            {
                test: /\.js$/,
                use: ['post1-loader', 'post2-loader'],
                enforce: 'post',
            }
        ]
    }
}

在这里插入图片描述

故loader的执行顺序就是pitching阶段,调用loader.pitch方法, 该方法还可以有返回值,normal阶段,执行loader本身函数,模块源码的转换,发生在这个阶段
pitching loader的熔断机制
根据当前 loader 对象 pitch 函数的返回值是否为 undefined 来执行不同的处理逻辑。如果 pitch 函数返回了非 undefined 的值,则会出现熔断。即跳过后续的执行流程,开始执行上一个 loader 对象上的 normal loader 函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1979674.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

黑马头条vue2.0项目实战(五)——首页—频道编辑

目录 1. 使用页面弹出层 1.1 页面弹出层简单使用 1.2 创建频道编辑组件 1.3 页面布局 2. 展示我的频道 3. 展示推荐频道列表 3.1 获取所有频道 3.2 处理展示推荐频道 4. 添加频道 5. 编辑频道 5.1 处理编辑状态 5.2 切换频道 5.3 让激活频道高亮 5.4 删除频道 6.…

K8S Docker搭建RocketMQ Dledger高可用集群

本篇文章回顾在华润基于K8S和Docker云设施搭建初步高可用具备failover的RocketMQ集群。RocketMQ版本是5.0.0。 目前现状 采用Dledger模式部署集群,3台namesrv,3台broker,namesrv每台1g的Docker部署,broker每台2g的Docker部署。测…

Hyper-V创建虚拟机安装OpenEulerOS

文章目录 下载OpenEulerHyper-V创建虚拟机 下载OpenEuler 进入官网下载,我选择的是 openEuler 24.03 LTS ,选择第一个版本即可: Hyper-V创建虚拟机 点击新建->虚拟机: 点击下一步: 输入虚拟机名称&#xff0c…

AMD Product Specifications - AMD 产品规格汇总

AMD Product Specifications - AMD 产品规格汇总 1. Desktop, Laptop and Workstation Processor Specifications (台式处理器、笔记本电脑处理器和工作站处理器规格)2. Server Processor Specifications (服务器处理器规格)3. Embedded Processor Specifications (嵌入式处理器…

element-ui表格1.0.0.1,表格的属性

前言:基于vue2element-ui的理论转实践的使用 第一组:数据显示 利用v-bind:data在table绑定数据源,将数据利用prop的属性传入到table-column,渲染到表格中 正片开始 首先,常用的属性(作者常用&#xff09…

书生大模型_InternLM + LlamaIndex RAG 实践

1.任务要求 基于 LlamaIndex 构建自己的 RAG 知识库,寻找一个问题 A 在使用 LlamaIndex 之前InternLM2-Chat-1.8B模型不会回答,借助 LlamaIndex 后 InternLM2-Chat-1.8B 模型具备回答 A 的能力,截图保存。 来源: https://github.…

鸿蒙媒体开发【媒体会话-提供方】音频和视频

媒体会话-提供方 介绍 本示例主要展示了媒体会话(媒体提供方)的相关功能,使用ohos.multimedia.avsession等接口实现媒体提供方与媒体播控中心自定义信息的交互功能。 注意: 此示例仅展示媒体提供方的相关功能,如果需…

2024 年华数杯全国大学生数学建模竞赛C 题 老外游中国 完整成品文章分享

最近,“city 不 city”这一网络流行语在外国网红的推动下备受关注。随着我国过境免签政策的落实,越来越多外国游客来到中国,通过网络平台展示他们在华旅行的见闻,这不仅推动了中国旅游业的发展,更是在国际舞台上展现了…

大模型学习笔记 - LLM 解码与部署

LLM 解码与部署 LLM 解码与部署 1. 解码策略 1.1 背景 1.1 贪心搜所1.2 概率采样 1.2 贪心搜所改进 1.2.1 束搜索 (保留前n个高概率的句子,最终选取整体概率高的生成)1.2.2 长度惩罚 (估计生成更长句子)1.2.3 重复惩罚…

stm32入门-----硬件I2C读写MPU6050

目录 前言 一、stm32中I2C库函数介绍(stm32f10x_i2c.h) 1.初始化 2.使能操作 3.生成起始位和结束位标志 4.发送I2C从机地址 5.发送数据和接收数据 6.发送应答位 7.状态检测 二、硬件I2C读取MPU6050 1.电路连线图 2.主要工程文件 3.MPU6050.…

WordPress网站被入侵,劫持收录事件分析

7.15,网站被入侵,但是直到7月17日,我才发现被入侵。 16日,17日正常更新文章,17日查询网站收录数据时,在站长资源平台【流量与关键词】查询上,我发现了比较奇怪的关键词。 乱码关键词排名 起初…

案例分享:如何使用原生的NodeJs下载视频网站上的视频资源到本地生成MP4文件

如何使用原生的NodeJs下载视频网站上的视频资源到本地生成MP4文件 1、当下视频网站的视频资源无法通过常规手段下载的原因2、什么是M3U8是什么视频文件?3、如何下载M3U8文件中的TS文件并在本地合并为MP4文件?3.1 FFmpeg 是什么工具?3.2 安装 FFmpeg 工具3.3 使用 FFmpeg 工具…

每天五分钟深度学习:向量化方式完成逻辑回归模型的参数更新

本文重点 上一节课程中,我们学习了m个样本的前向传播的向量化,我们可以同时完成m个样本的前向传播,也就是m个样本z的计算,然后a的计算。本节课程我们将学习dw和db参数更新的向量化,最终得到整个逻辑回归算法的参数更新的向量化表示。 非向量化的逻辑回归梯度下降算法 如…

学习日志8.4--DHCP攻击防范

目录 DHCP饿死攻击 DHCP Sever仿冒攻击 DHCP攻击防范 DHCP动态主机配置协议,是给主机提供自动获取IP地址等配置信息的服务。在主机对DHCP服务器发送DHCP Discover请求之后,服务器回复offer,主机再回复request,最后服务器回复AC…

uni-app开发打包成H5部署到服务器

1. 点击发行 2. 点击进入manifest.json的h5配置里,根据自己的情况配置一些信息。一定要注意配置 “运行的基础路径”,如果出现空白页面或者静态文件404的情况,可能是因为这个路径没有配置好。 3. 填写域名 4. 点击发行后,控制台后…

如何让左右两个div各占50%,并且高度相同?

如何设置两个div各占一半,并且高度随着内容增加,而且两边div的高度一致呢?默认会发现高度不一致,改用flex就可以了,另外发现传统的table也可以轻易实现。不知道不用flex的话是否可以实现。 方法1(div实现&a…

二分+dp,CF 1993D - Med-imize

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 D - Med-imize 二、解题报告 1、思路分析 对于n < k的情况直接排序就行 对于n > k的情况 最终的序列长度一定是 (n - 1) % k 1 这个序列是原数组的一个子序列 对于该序列的第一个元素&#xff0…

Spring中使用Async进行异步功能开发实战-以大文件上传为例

目录 前言 一、场景再现 1、Event的同步机制 二、性能优化 1、异步支持配置 2、自定义处理线程池扩展 3、将线程池配置类绑定到异步方法 三、总结 前言 在之前的博客中&#xff0c;曾将讲了在SpringBoot中如何使用Event来进行大文件上传的解耦&#xff0c;原文地址&…

算法回忆录(2)

6.输入一个非递减排列的整数数组nums,和一个目标值target。请找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值target,则输出0&#xff0c;0。请设计一个时间复杂度为0(log n)的算法解决此问题。 输入包括两行&#xff0c;第一行输入两个整数&#xff0c…

【电路笔记】-偏置晶体管

偏置晶体管 文章目录 偏置晶体管1、概述2、共发射极晶体管偏置3、集极反馈偏置4、双反馈晶体管偏置5、发射极反馈配置6、分压器晶体管偏置晶体管偏置是将晶体管直流工作电压或电流条件设置为正确电平的过程,以便晶体管可以正确放大任何交流输入信号 1、概述 双极晶体管的稳态…