loader1、loader的配置和执行顺序

最新推荐文章于 2024-09-05 10:20:47 发布

原创最新推荐文章于 2024-09-05 10:20:47 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

版权归作者所有，如需转载，请联系作者

文章标签：

#loader #配置 #原理 #执行顺序 #inline-loader

前端同时被 2 个专栏收录

68 篇文章

订阅专栏

webpack4.0

32 篇文章

订阅专栏

本文深入解析Webpack中Loader的配置方法，包括单个与多个Loader的配置，执行顺序及如何使用行内Loader。探讨了Loader的执行流程，以及如何通过enforce属性调整执行优先级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

loader的配置

配置单个loader请见上一个文件

配置多个loader

数组形式

 let path = require('path');

 module.exports = {
  mode:'development',
  entry:'./src/index.js',
  output:{
   filename:'bundle.js',
   path:path.resolve(__dirname,'dist')
  },
  resolveLoader:{
   modules:['node_modules',path.resolve(__dirname,'loaders')]//先在node_modules文件夹下查找，找不到就去后面的loaders路径下查找
  },
  module:{
   rules:[
    {
     test:/\.js$/,
     use:['loader3','loader2','loader1']//loader执行顺序从右向左
    }
   ]
  }
 }

对象形式

 let path = require('path');

 module.exports = {
  mode:'development',
  entry:'./src/index.js',
  output:{
   filename:'bundle.js',
   path:path.resolve(__dirname,'dist')
  },
  resolveLoader:{
   modules:['node_modules',path.resolve(__dirname,'loaders')]//先在node_modules文件夹下查找，找不到就去后面的loaders路径下查找
  },
  module:{
   rules:[
    {
     test:/\.js$/,
     use:{
      loader:'loader3'
     }
    },
    {
     test:/\.js$/,
     use:{
      loader:'loader2'
     }
    },
    {
     test:/\.js$/,
     use:{
      loader:'loader1'
     }
    }
   ]
  }
 }

loader的执行顺序

一般情况下，loader的执行顺序为从右往左，从下往上。
可以通过enforce属性去改变执行顺序。
- enforce:‘pre’ 前置权重最高
- enforce:‘normal’ 不变权重第二
- enforce:‘inline’ 行内权重第三
- enforce:‘post’ 后置权重第四
```
 module:{
rules:[
{
 test:/\.js$/,
 use:{
  loader:'loader3'
 },
 enforce:'pre'
},
{   
 test:/\.js$/,
 use:{
  loader:'loader2'
 }
},
{
 test:/\.js$/,
 use:{
  loader:'loader1'
 }
}
]
```

}
```
>上面的执行顺序就是 loader3、loader1、loader2

行内loader(inline-loader)的使用

 //inline-loader
 function loader(source){
     console.log('inline-loader');
     return source;
 }
 module.exports = loader;

 //a.js
 module.exports = 'yuhua';

 //index.js
 let str = require('inline-loader!./a.js');//这句话的意思就是把a.js的内容导入，并传递到inline-loader，然后require的是inline-loader处理后的结果

重点:let str = require(‘inline-loader!./a.js’);这句话的意思就是把a.js的内容导入，并传递到inline-loader，然后require的是inline-loader处理后的结果

inline-loader的执行顺序举例(重点)

现在有以下文件

 //webpack.config.js
 module:{
  rules:[
   {
    test:/\.js$/,
    use:{
     loader:'loader3'
    },
    enforce:'pre'
   },
   {
    test:/\.js$/,
    use:{
     loader:'loader2'
    }
   },
   {
    test:/\.js$/,
    use:{
     loader:'loader1'
    }
   }
  ]
 }


 //某某-loader
 function loader(source){
  console.log('某某-loader~~~~~~~~')
  return source;
 }

 module.exports = loader;

 //a.js
 module.exports = 'yuhua';
 //index.js
 let str = require('inline-loader!./a.js')

执行顺序
先找到入口文件index.js，对index.js按照loader先后顺序进行loader的处理，先后打印出：

 loader3~~~~~~~~
 loader1~~~~~~~~
 loader2~~~~~~~~

然后发现index.js中有引入a.js，那么对a.js按照loader先后顺序进行loader的处理，因为a.js是使用inline-loader的，并且引用方式为’inline-loader!./a.js’，所以先后打印出：

 loader3~~~~~~~~
 loader1~~~~~~~~
 loader2~~~~~~~~
 inline-loader~~~~~~~~

所以总共先后打印顺序为：

 loader3~~~~~~~~
 loader1~~~~~~~~
 loader2~~~~~~~~
 loader3~~~~~~~~
 loader1~~~~~~~~
 loader2~~~~~~~~
 inline-loader~~~~~~~~

inline-loader的前缀符号的含义

我们一般使用inline-loader的方式为：

 let str = require('inline-loader!./a.js')

其实，使用inline-loader不止这一种方式，不同的前缀代表不同的意思。
无前缀：所有类型loader都要处理

 let str = require('inline-loader!./a.js')

-！前缀：不会让文件再去通过pre和normal loader来处理

 let str = require('-!inline-loader!./a.js')

!前缀不会通过normal loader来处理

 let str = require('!inline-loader!./a.js')

!! 只通过inline-loader来处理

 let str = require('!!inline-loader!./a.js')

loader的组成——pitchLoader和normalLoader

每个loader都由pitchLoader和normalLoader这两部分组成。pitch和normal的执行顺序正好相反，当pitch没有定义或者没有返回值时，会先依次执行pitch在获取资源执行loader，如果定义的某个pitch有返回值则会跳过读取资源和自己的loader