webpack工程化高级课程_webpack自定义loader.pdf

webpack自定义Loader

王红元coderwhy

目录

1认识自定义Loader

content

2Loader的加载顺序

3同步和异步Loader

4获取以及校验参数

5Loader案例练习一

6Loader案例练习二

coderwhy创建自己的Loader

◼Loader是用于对模块的源代码进行转换（处理），之前我们已经使用过很多Loader，比如css-loader、style-loader、babel-

loader等。

◼这里我们来学习如何自定义自己的Loader：

Loader本质上是一个导出为函数的JavaScript模块；

loaderrunner库会调用这个函数，然后将上一个loader产生的结果或者资源文件传入进去；

◼编写一个hy-loader01.js模块这个函数会接收三个参数：

content：资源文件的内容；

map：sourcemap相关的数据；

meta：一些元数据；

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

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

coderwhyresolveLoader属性

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

配置resolveLoader属性；

coderwhyloader的执行顺序

◼创建多个Loader使用，它的执行顺序是什么呢？

从后向前、从右向左的

coderwhypitch-loader和enforce

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

coderwhy执行顺序和enforce

◼其实这也是为什么loader的执行顺序是相反的：

run-loader先优先执行PitchLoader，在执行PitchLoader时进行loaderIndex++；

run-loader之后会执行NormalLoader，在执行NormalLoader时进行loaderIndex--；

◼那么，能不能改变它们的执行顺序呢？

我们可以拆分成多个Rule对象，通过enforce来改变它们的顺序；

◼enforce一共有四种方式：

默认所有的loader都是normal；

在行内设置的loader是inline（importloader1!loader2!./test.js）；

也可以通过enforce设置pre和post；

◼在Pitching和Normal它们的执行顺序分别是：

post,inline,normal,pre；

pre,normal,inline,post；

coderwhy同步的Loader

◼什么是同步的Loader呢？

默认创建的Loader就是同步的Loader；

这个Loader必须通过return或者this.callback来返回结果，交给下一个loader来处理；

通常在有错误的情况下，我们会使用this.callback；

◼this.callback的用法如下：

第一个参数必须是Error或者null；

第二个参数是一个string或者Buffer；

coderwhy异步的Loader

◼什么是异步的Loader呢？

有时候我们使用Loader时会进行一些异步的操作；

我们希望在异步操作完成后，再返回这个load