loader字面意思是装载器，在webpack中它的实际功能则更像是预处理器。Webpack本身只认识JavaScript，对于其他资源必须预先定义一个或多个loader对其进行转译，输出为webpack能够接收的形式再继续进行，因此loader做的实际上是与处理的工作。

loader配置

test、use、inlcude/exclude

loader的配置关键只是两件事：

  1. 确定对哪些模块进行预处理（test、include、exclude）;
  2. 使用哪些loader（use）
    1. module.exports = {
    2. //···
    3. module:{
    4.    rules:[
    5.        {    
    6.      test:/\.css$/,
    7.      exclude:/node_modules/,
    8.      use:['style-loader','css-loader'],
    9.    }
    10.  ],
    11. },
    12. };
    test属性接收一个正则表达式或者一个元素为正则表达式的数组，只有正则式匹配上的模块才会使用这条规则。/\.css$/表示以.css结尾的文件。
    use可接受一个数组，数组中包含该规则所使用的loader。使用loader前需要先用npm下载。另外loader的执行顺序是从右到左的，也就是说数组左边的loader是最后执行的。
    exclude接收一个正则式或者绝对路径字符串，以及它们组成的数组，用于指出哪些路径下的模块不适用该规则。
    include接收值类型和exclude相同，但是用来指出哪些路径下的模块适用该规则。
    通常node_modules下的模块是不需要做额外处理的。

resource和issuer

它们用于更加精确地确定模块规则的作用范围。
resource用来描述被加载模块，而加载者是issuer。

  1. module.exports = {
  2.   //···
  3.   module:{
  4.     rules:[
  5.       {
  6.         use:['style-loader','css-loader'],
  7.         resource:{
  8.           test:/\.css$/,
  9.           exclude:/node_modules/,
  10.         },
  11.         issuer:{
  12.           test:/\.js$/,
  13.           exclude:/node_modules/,
  14.         },
  15.       },
  16.     ],
  17.   },
  18. }

上面的配置表示：node_modules目录之外的js文件引用css模块时，都适用该规则，可以使用css-loader、style-loader进行预编译。
如果不写issuer，则表示任何引用都适用该规则。

enforce

用来指定loader的种类：pre、inline（已弃用）、normal、post。默认是normal。
pre和post需要用enforce来指定。

  1. rules:[
  2.   {
  3.     test:/\.js$/,
  4.     enforce:'pre',
  5.     use:'eslint-loader'
  6.   }
  7. ]

pre表示在所有loader之前执行。
post表示在所有loader之后执行。

常用loader

  • 对于XX资源应该使用哪个loader
  • 实现XX功能应该使用哪个loader