26_自定义Loader
自定义Loader
loader就是对模块的源代码进行处理(转换),如css-loader、style-loader等
在上一篇的源代码中我们已经知道了loader是在runLoaders才会去使用loader
Loader本质上是一个导出为函数的JavaScript模块
loader runner库会调用这个函数,然后将上一个loader产生的结果或者资源文件传入进去
当我们npm run build的时候
当我们在自定义的loader中,修改了content
运行结果
哪你就会发现我们可以在这里去改变content了,如我们es6转成es5等等
resolveLoader
加入我们有多个loader,那么我们不可能在use中一个一个去写相对路径,那么我们该如何解决?
在webpack的文档中有一个属性:resolveLoader,这个是来解决loader的路径问题的
resolveLoader中有一个属性modules默认为node_modules,这就说明了为什么像css-loader直接就可以在use中写 css-loader,他是去node_modules中去查找的
loader的执行顺序
在我们的每一个loader里面,loader就是导出的函数,函数所在的整个模块就是一个loader,loader并不是只有一个函数,我们之前编写的函数是有一个名字的:NormalLoader
那么像其他的函数也有对应的名字如:PitchLoader
常见的loader是用不到这个东西的
所以不能说他的执行顺序是从后往前的,只能说NormalLoader是从后往前的
那么他的原理在哪呢?
我们找到loaderRunner这个库,找到lib/LoaderRunner.js,里面有个导出函数runLoader
一直往下翻找到iteratePitchingLoaders点进去
改变Loader的执行顺序
如何改变loader的执行顺序呢?
我们可以将rule对象,通过enforce来改变他们的顺序
enforce一共有四种方式
- 默认所以的loader都是normal
- 在行内设置的loader是inline
- 也可以通过enforce设置pre和post
先执行pre再执行normal,normal是按照顺序的
在Pitching和normal他们的执行顺序分别是
- Pitching:post,inline,normal,pre
- Normal:pre,normal,inline,post
同步loader和异步loader
上面的写法都是同步的loader,同步loader的特点:在方法执行完之前,必须返回内容
异步loader
给loader中传值
像以前的webpack版本的话需要先安装一个 loader-utils并且调用getOptions传入this才可以
现在的话不需要那么麻烦了,直接this.query就可以获取到传入的值
给参数添加校验规则
定义
使用
先安装官方提供的库 npm i schema-utils -D
假如传入的参数不合法
26_自定义Loader的更多相关文章
- 自定义Loader
自定义Loader涉及到的接口: public delegate byte[] CustomLoader(ref string filePath); public void LuaEnv.AddLoa ...
- APICloud框架--sublime使用自定义loader
官方的apploader调试器,只是有官方的一些模块,如果我们使用非官方的模块就要使用自定义loader进行调试.接下来就走一边sublime设置自定义loader的步骤 修改config.xml 打 ...
- webpack自定义loader并发布
一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...
- webpack自定义loader和自定义插件
1.封装自定义的功能loader (格式很简单,重点在于loader-utils,loaderUitls.getOptions可获取webpack配置rules中的options以供使用 ) 这只是一 ...
- 自定义loader基础知识
参考 :译文 编写一个loader https://webpack.github.io/docs/loaders.html 按照loader的返回值可以分为两种: 最左loader:这种loader会 ...
- Loader加载器
今天学到了这个Loader,浅谈一下自己的看法: 1.定义 Loader是一个加载器,可以用来它访问数据,可以看做访问数据的机器(好比挖掘机).装再器从android3.0开始引进,它使得在activ ...
- Android 异步加载神器Loader全解析
在之前呢,我们经常会有这种需求,比如在某个activity,或者某个fragment里面,我们需要查找某个数据源,并且显示出来,当数据源自己更新的时候,界面也要及时响应. 当然咯,查找数据这个过程可能 ...
- Cocos2d-x——CocosBuilder官方帮助文档翻译1 使用自定义类
原创:请注明转载! 在Cocos2d-x中使用CocosBuilder 使用自定义类 CocosBuilder的使用方法是通过自定义类.在CocosBuilder中选中一个对象并在属性栏中输入自定义类 ...
- 18 Loader 总结
1. Loader 装载器 Android3.0以后出来的 它可以使Activity和Fragment 异步加载数据 变得简单(Loader里封装了AsyncTask) Loader特点: 1,对每一 ...
- Vue Loader
介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...
随机推荐
- C# SMTP发邮件不支持465端口的解决方案
C# 发邮件帮助类传送门(465端口除外): https://www.cnblogs.com/dennisdong/p/15953790.html 一.问题解惑,为什么465发送失败 查阅资料得知,. ...
- python3中,//、/ 的区别
//:地板除,返回整数结果 /:浮点数除法,返回浮点结果 例: print(3//2) #输出1 print(3/2) #输出1.5 拓展:判断水仙花数 # 题目:打印出所有的"水仙花数 ...
- C++并发-同步并发
1.等待事件 std::mutex m; void wait() { std::unique_lock<std::mutex> lk(m); lk.unlock(); std::this_ ...
- 【ASP.NET Core】标记帮助器——抽象层
标记帮助器,即 Tag Helpers.这个嘛,就直接翻译了,叫"标记帮助器",虽然不好听,但只能这样了.当然你翻译为"标记增强器"也行. 所谓标记帮助器,就是 ...
- C语言-补漏 -内存管理
8. 全局就是简简单单编写的 静态函数--只能在当前文件内使用的函数
- DrCush_082020_血清阴性RA确诊延迟
转自Dr Jack Cush的Twitter (2020-08-20) 梅奥诊所:血清阴性RA的诊断存在延迟-血清阴性的首次关节肿胀距RA确诊为187天,而血清阳性者则为11天(P <.001) ...
- K8S 部署es,搭建efk日志收集系统
1.k8s部署es集群:https://www.jianshu.com/p/e490f7597539 2.k8s搭建efk日志收集系统:https://www.cnblogs.com/minseo/p ...
- 100、 FilenameUtils
FilenameUtils import org.apache.commons.io.FilenameUtils; 测试数据 String fileDirectory = "/D:/aa/b ...
- fabric学习笔记7
Fabric2.0Java SDK实践-合约交易 20201303张奕博 2023.1.18 1.创建基础工程 新建一个Maven工程,添加以下依赖 <dependency> <gr ...
- Deer_GF之UI界面制作
Hi,今天介绍一下Deer_Gf里的界面制作. 在游戏制作的过程中,游戏界面占到游戏的百分之八十,可以快速开发界面,对游戏开发有很大帮助. 所以在Deer_Gf框架里,为了让开 ...