webpack 如何自定义loader

2023-11-05

webpack中loader本质就是函数,其中前一个loader处理完代码后,交给后一个代码继续处理,最终经过多个loader的处理后,源代码变成最终代码。

自定义loader其实就是自己写一个函数,在把函数导出,写在rule中即可

如图所示,导出一个函数,函数接受源代码,并且将处理好的代码进行返回

 

 然后将你写的代码位置路径放在resolveLoader配置中,告诉webpack要在哪里去找loader,然后再rule中,将你的文件名写在loader上就可以了,或者直接在loader配置上写路径也可以。

到这一个简单的loader就创建好了,我们可以发现,图中我们写的loader对象中,还有options属性,这个是干什么的呢?

options属性是可以传入loader中的配置,但这个配置并不是由参数传进去的,而是使用了getOptions方法,如下图所示

这样我们就可以为我们的loader传入一些配置了,并且我们还可以通过validate方法进行验证

 首先我们要下载schema-utils,然后引入validate函数,在创建我们的校验规则文件,也就是图中的schema,如下图

然后调用validate函数,并传入配置和规则,该函数就会帮我们校验了

如果我们要对在loader中进行一些异步操作,下一个loader是不等人的,那么我们则需要异步loader。

首先同步loader中我们不仅可以通过return的方式返回处理过后的代码,还可以调用this.callback(),如下图

其中第一个值为错误,所以我们传null

如果我们要实现一些异步操作,那么我们就要将loader变为异步loader,有两个办法

1.返回promise 

如上图,返回promise对象,就会变成异步loader,下一个loader会等待resolve中的值进行处理

2.使用async函数

调用this.async函数,此loader就会变成异步loader,并且async还会返回一个函数,当我们调用这个函数是,将返回值当作参数传入,下一个loader才会继续执行,处理这个参数。 

我们还可以自定义pitchloader如下图

 module.exports.pitch其实就是导出的loader上的pitch属性,pitchloader其实本事就是normalloader上的一个pitch属性,想了解更多可以看我的另一篇文章webpack loader执行流程

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

webpack 如何自定义loader 的相关文章

随机推荐

  • CentOS7安装mysql8.0.12

    根据搜集的资料安装测试并在安装测试过程中整理的文档 部分参考文档在相应位置有标记 如有不足希望不吝赐教 目录 一 配置yum源 1 下载mysql源安装包 2 安装mysql源 3 检查是否安装成功 4 修改安装版本 非必须 二 安装mys
  • 计网复习第四章——网络层

    基本知识点 两种服务 1 1 虚电路服务 两台机子通信的时候 先建立连接 预留出要用的网络资源 然后双方就用这条虚电路发送分组 1 2 数据报服务 不建立连接 每一个IP数据报独立发送 网络层不保证可靠传输 网际协议IP 2 1 IP地址怎
  • 分块详解(优雅的暴力)

    作者 hsez yyh 链接 https blog csdn net yyh getAC article details 126823013 来源 湖北省黄石二中信息竞赛组 著作权归作者所有 商业转载请联系作者获得授权 非商业转载请注明出处
  • 各代iphone尺寸_iphone屏幕尺寸比例是多少,iphone各代屏幕尺寸大小介绍

    自2007年苹果发布第一代iPhone以来 到目前最新的iPhone XS XS Max 苹果累计发布了21款手机 涉及7款尺寸 8种分辨率 那么这么多的不同手机之间有什么内在联系吗 为什么在iPhone6代 8代之间 屏幕是4 7寸和5
  • python实现简单的百度搜索

    usr bin python coding utf 8 import urllib import urllib2 实现百度关键字查询的小例子 定义基础url url http www baidu com s 定义请求头信息 headers
  • 实现字符串倒叙

    var reverse function str 倒叙的函数 return str split reverse join split切割字符串然后转换为数组 reverse是jquery的倒序方法 然后join是将其放到字符串中 let a
  • 单极性PWM和双极性PWM

    单极性与双极性PWM模式 从调制脉冲的极性看 PWM又可分为单极性与双极性控制模式两种 单极性PWM模式 产生单极性PWM模式的基本原理如图6 2所示 首先由同极性的三角波载波信号ut 与调制信号ur 比较 图6 2 a 产生单极性的PWM
  • 漫画:什么是区块链?

    点击上方 程序员小灰 选择 置顶公众号 有趣有内涵的文章第一时间送达 什么是区块链 区块链 英文 Blockchain 本质上是一种去中心化的分布式数据库 任何人只要架设自己的服务器 接入区块链网络 都可以成为这个庞大网络的一个节点 区块链
  • WScript.CreateObject(WScript.Shell)

    为什么 WScript CreateObject WScript Shell 无法执行 源 VBS 程序 Dim t Set t WScript CreateObject WScript Shell Set t Nothing WScrip
  • MySQL text类型的最大长度

    MySQL 3种text类型的最大长度如下 TEXT 65 535 bytes 64kb MEDIUMTEXT 16 777 215 bytes 16Mb LONGTEXT 4 294 967 295 bytes 4Gb 参考 http w
  • cmake的macro

    一 定义 可以把它理解为C 的宏 命令如下 macro
  • The connection to adb is down, and a severe error has occured.

    报错 The connection to adb is down and a severe error has occured 解决 cmd跳到sdk tools文件路径下 adb kill server 然后再adb start serv
  • Kotlin_读写文件

    读写文件操作记录 提取成函数 方便看其返回值 以加深理解 private fun createNewFile File var file File output txt if file exists file delete file cre
  • MES :制造执行系统 (Manufacturing Execution System)

    MES是美国管理界90年代提出的新概念 美国先进制造研究机构AMR Advanced Manufacturing Research 通过对大量企业的调查发现现有的企业生产管理系统普遍由以ERP MRPII为代表的企业管理软件 以SCADA
  • 在gitlab中生成增量代码质量分析报告

    作为管理者 你是否想在组员创建merge request时 生成代码质量分析报告 今天它来了 gitlab ci yml image python 3 11 flake8 allow failure true rules 只有flake8任
  • centos等重新编译rpm包笔记备忘

    源码包获取 直接浏览器下载或者添加source源后 直接 yumdownloader source kernel 或者dnf命令 源码包编译依赖包安装 编译之前还需要补齐编译这个包需要的依赖 当然可以rpmbuild命令提示后一个一个补 网
  • STM32中如何用systick中断来监控系统的运行时间

    define SysTick CTRL TICKINT Pos 1U define SysTick CTRL TICKINT Msk 1UL lt lt SysTick CTRL TICKINT Pos define DRV SYS TIC
  • 关于批量添加用户和域用户

    首先看批量添加用户 有三种方法 1 开始 运行 CMD 输入 for l i in 1 1 50 do net user test i 123456 add 注 1 1 50 的意思是 开始值 递增量 终值 如果想递减 50 1 1 tes
  • pycharm专业版许可证申请(特定人群)

    来到官网 PyCharm the Python IDE for Professional Developers by JetBrains 翻译一下 我是学生党 所以选择第一个 选择官方文件 这里需要学信网在新验证 学信网官网在此 中国高等教
  • webpack 如何自定义loader

    webpack中loader本质就是函数 其中前一个loader处理完代码后 交给后一个代码继续处理 最终经过多个loader的处理后 源代码变成最终代码 自定义loader其实就是自己写一个函数 在把函数导出 写在rule中即可 如图所示