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

自定义loader

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

//1.自定义loader,接收内容参数(contentx)
module.exports = function (contentx) {
  //2.处理contetx
  console.log(contentx, 'normalLoader0');
  //3.返回contentx
  return contentx;
};
//loader分为两种一种是上面的Nomalloader,还有一种是下面的pitchloader
module.exports.pitch = function () {
  console.log('pitchLoader0');
};

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

webpack的配置.png

自定义loader路径查找

image.png
执行结果
result
可以看到在执行pitchLoader的时候执行顺序是正序的，在执行normalloader的时候执行顺序是倒序的

源码解读

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

.pitchLoader

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

normalLoader
当判断当前的loader是normalLoader时index是递减的，所以执行的顺序是倒序的

enforce

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

• post ， inline ， normal ， pre
  默认的配置是normal
  在 pitchLoader的执行顺序是给出的顺序，normalLoader的执行顺序是倒过来的