webpack配置之自定义loader

Posted 2023-05-03

参考技术A

自己编写一个Loader的过程是比较简单的

官方文档: https://webpack.js.org/contribute/writing-a-loader/
接口文档: https://webpack.js.org/api/loaders/

简单案例
1.创建一个替换源码中字符串的loader

2.在配置文件中使用loader，这里用的绝对路径

其他引入自定义loader方式，可参考另外一篇文章-- webpack中resolveLoader的使用方法

4. this.callback :如何返回多个信息，不止是处理好的源码，我们可以使用this.callback来处理

先用setTimeout处理下试试，发现会报错

我们使用 this.async 来处理，会返回 this.callback

webpack中loader为啥是从后往前加载的

参考技术A 在webpack中loader是分为两种的，一种是pitchloader一种是normalloader ，在使用自定义loader时可以用如下方法进行定义loader

大部分的loader定义时用的是normalloader，loader的执行顺序是和pitchloader调用是有关的，现在来定义三个loader，来测试一下loader的执行顺序
用如图所示的loader来执行js文件

自定义loader路径查找

loader的加载是webpack在runloader的时候执行的，调用的loader-runner这个库，这个库在执行loader的时候将所有的loader加了一个index

源码中在判断当前的loader是pitchLoader时index是递增的，所以pitchLoader是正序的

enforce是可以改变loader的执行顺序，一共有四种配置