自定义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的更多相关文章

  1. 自定义Loader

    自定义Loader涉及到的接口: public delegate byte[] CustomLoader(ref string filePath); public void LuaEnv.AddLoa ...

  2. APICloud框架--sublime使用自定义loader

    官方的apploader调试器,只是有官方的一些模块,如果我们使用非官方的模块就要使用自定义loader进行调试.接下来就走一边sublime设置自定义loader的步骤 修改config.xml 打 ...

  3. webpack自定义loader并发布

    一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...

  4. webpack自定义loader和自定义插件

    1.封装自定义的功能loader (格式很简单,重点在于loader-utils,loaderUitls.getOptions可获取webpack配置rules中的options以供使用 ) 这只是一 ...

  5. 自定义loader基础知识

    参考 :译文 编写一个loader https://webpack.github.io/docs/loaders.html 按照loader的返回值可以分为两种: 最左loader:这种loader会 ...

  6. Loader加载器

    今天学到了这个Loader,浅谈一下自己的看法: 1.定义 Loader是一个加载器,可以用来它访问数据,可以看做访问数据的机器(好比挖掘机).装再器从android3.0开始引进,它使得在activ ...

  7. Android 异步加载神器Loader全解析

    在之前呢,我们经常会有这种需求,比如在某个activity,或者某个fragment里面,我们需要查找某个数据源,并且显示出来,当数据源自己更新的时候,界面也要及时响应. 当然咯,查找数据这个过程可能 ...

  8. Cocos2d-x——CocosBuilder官方帮助文档翻译1 使用自定义类

    原创:请注明转载! 在Cocos2d-x中使用CocosBuilder 使用自定义类 CocosBuilder的使用方法是通过自定义类.在CocosBuilder中选中一个对象并在属性栏中输入自定义类 ...

  9. 18 Loader 总结

    1. Loader 装载器 Android3.0以后出来的 它可以使Activity和Fragment 异步加载数据 变得简单(Loader里封装了AsyncTask) Loader特点: 1,对每一 ...

  10. Vue Loader

    介绍 允许为 Vue 组件的每个部分使用其它的 webpack loader,例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug(模板 ...

随机推荐

  1. 视觉十四讲:第七讲_2D-2D:对极几何估计姿态

    1.对极几何 从2张图片中,得到若干个配对好的2d特征点,就可以运用对极几何来恢复出两帧之间的运动. 设P的空间坐标为: \(P=[X,Y,Z]^{T}\) 两个像素点\(p_{1},p_{2}\)的 ...

  2. Zstack使用经验系列2-安装的存储配置

    从上图读者应该能看出当初分配主存储和镜像存储时空间分配的是多么不合理,镜像空间不需要那么多.不过这时系统已经运行了近1年,很多云主机以及系统服务都搭好了,如果再重新分配空间是多么的麻烦! 所以开始为p ...

  3. 使用IDM从Google 云端硬盘链接上下载超大文件

    1.将原始文件以快捷方式存放到自己的网盘中. 2.进入自己的网盘,找到存放好的目标文件快捷方式,点击右键,选择下载. 3.如果电脑上IDM且浏览器装有IDM插件,会弹出下载框,点击下载即可. 4.然后 ...

  4. OpenLayers入门练习

    一.实验内容 练习OpenLayers的引用形式; 简单地图加载; 控件加载. 二.实验步骤 2.1 ol引用 <!doctype html> <html lang="zh ...

  5. hdfs file system shell的简单使用

    目录 1.背景 2.hdfs file system shell命令有哪些 3.确定shell操作的是哪个文件系统 4.本地准备如下文件 5.hdfs file system shell 5.1 mk ...

  6. 2、flex最后不对齐问题

    https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/

  7. MySQL突然连接失败

    mysql突然连接失败问题 1.报错 MySQL error: 2013, "Lost connection to MySQL server at 'reading initial comm ...

  8. OOP学习讲义

    什么是OOP 场景:我进入一家IT公司,面试官问道我这个问题.OOP?WTF?"众所周知,Java是一门面向对象的开发语言,所以OOP不就是面向对象设计咩.Java把所有的元素都当成是一个对 ...

  9. 【剑指Offer】【树】【双向链表】二叉搜索树与双向链表

    题目:输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. A:二叉树中每个节点都有一个left指针指向左节点,一个right指针指向右节 ...

  10. [后端-python实战总结]-chapter1-python基础01

    1.1 week 1 > 密码秘文: import getpass username = input('username:') passwd = getpass.getpass('passwd: ...