创建自己的Loader

创建自己的Loader
Loader是用于对模块的源代码进行转换（处理），css-loader、style-loader、babel-loader等。
如何自定义自己的Loader：
Loader本质上是一个导出为函数的JavaScript模块；
loader runner库会调用这个函数，然后将上一个loader产生的结果或者资源文件传入进去；
编写一个hy-loader01.js模块这个函数会接收三个参数：
content：资源文件的内容；
map：sourcemap相关的数据；
meta：一些元数据；

在加载某个模块时，引入loader

注意：传入的路径和context是有关系的，在前面我们讲入口的相对路径时有讲过。

resolveLoader属性

但是，如果我们依然希望可以直接去加载自己的loader文件夹，有没有更加简洁的办法呢？
配置resolveLoader属性；

loader的执行顺序

创建多个Loader使用，它的执行顺序是什么呢？
从后向前、从右向左的

pitch-loader和enforce

事实上还有另一种Loader，称之为PitchLoader：

执行顺序和enforce

其实这也是为什么loader的执行顺序是相反的：
run-loader先优先执行PitchLoader，在执行PitchLoader时进行loaderIndex++；
run-loader之后会执行NormalLoader，在执行NormalLoader时进行loaderIndex–；
那么，能不能改变它们的执行顺序呢？
我们可以拆分成多个Rule对象，通过enforce来改变它们的顺序；
enforce一共有四种方式：
默认所有的loader都是normal；
在行内设置的loader是inline（在前面将css加载时讲过，import ‘loader1!loader2!./test.js’）；
也可以通过enforce设置 pre 和 post；
在Pitching和Normal它们的执行顺序分别是：
post, inline, normal, pre；
pre, normal, inline, post；

同步的Loader

什么是同步的Loader呢？
默认创建的Loader就是同步的Loader；
这个Loader必须通过 return 或者 this.callback 来返回结果，交给下一个loader来处理；
通常在有错误的情况下，我们会使用 this.callback；
this.callback的用法如下：
第一个参数必须是 Error 或者 null；
第二个参数是一个 string或者Buffer；

异步的Loader

什么是异步的Loader呢？
有时候我们使用Loader时会进行一些异步的操作；
我们希望在异步操作完成后，再返回这个loader处理的结果；
这个时候我们就要使用异步的Loader了；
loader-runner已经在执行loader时给我们提供了方法，让loader变成一个异步的loader：

传入和获取参数

在使用loader时，传入参数
我们可以通过一个webpack官方提供的一个解析库 loader-utils，安装对应的库。

校验参数

我们可以通过一个webpack官方提供的校验库 schema-utils，安装对应的库

babel-loader案例

我们知道babel-loader可以帮助我们对JavaScript的代码进行转换，这里我们定义一个自己的babel-loader：

hymd-loader

webpack自定义loader相关推荐

webpack自定义loader并发布到npm
一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...
Webpack自定义Loader和Plugin方法
手写Loader Loader 本质上是导出函数的 JavaScript 模块,而该模块导出的函数被称为 Normal Loader,在开发 Loader时,我们可以在导出的函数上添加一个 pitch ...
vue-cli Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
webpack：自定义loader
以下是一个自定义loader replace-loader,实现一个类似模板引擎变量替换的简单功能文件目录 . ├── dist │ └── index.js # 打包结果 ├── loaders ...
Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
webpack loader解析及自定义loader
自定义实现webpack loader加载模块,解析指定的类型文件 loader loader是一个导出为函数的node模块,可通过this访问上下文. 特点: loader单一职责,只负责解决单一的 ...
webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现参数同步loader 异步loader Raw loader Pitching loader loader ...
webpack之 loader
开篇 loader不难,loader不难,loader不难.默念三遍,然后开始. loader 简介 loader 这个东西配置 webpack 的时候经常用到,刚开始会让人觉得有一种神秘感. 看了文 ...
Unity puerts 自定义Loader和调试和ab包的注意点
输出ab包他会把你创建的ab包都打包也就是在这里的创建的都打包 string assetBundleDirectory = Path.Combine(Application.streamingAs ...

webpack自定义loader

创建自己的Loader

在加载某个模块时，引入loader

resolveLoader属性

loader的执行顺序

pitch-loader和enforce

执行顺序和enforce

同步的Loader

异步的Loader

传入和获取参数

校验参数

babel-loader案例

hymd-loader

webpack自定义loader相关推荐

最新文章

热门文章