RuleSet之resource/resourceQuery

 RuleSet解析webpack.config.js设定的一系列配置约束（module.rules部分），

 结合import(resourcePath)/require(resourcePath)引入的资源，

 计算resourcePath和配置规则的匹配结果

 直白的说，可以认为这个过程是筛选使用哪些loader去加载处理资源的过程

 

 webpack源码RuleSet看到condition部分，总结一下

 https://webpack.js.org/configuration/module/#rule-resource

 

一般大众化配置格式：

module: {
  rules: [{
    test: /\.js$/,
    use: ['babel-loader],
    exclude: [],
    include: []
  }]
}

 没想到test、exclude、include是resource的简写，变换如下：

module: {
  rules: [{
    use: ['babel-loader],
    resource: {
      test: /\.js$/,
      exclude: [],
      include: []
    }
  }]
}

 需要说明使用了resource，不可以同时配置test、include、exclude属性

 

 使用resource方式配置，还有or、and、not属性可以配置，完整的如下

module: {
  rules: [{
    use: ['babel-loader],
    resource: {
      test: /\.js$/,
      exclude: [],
      include: [],
      not: [],
      and: [],
      or: []
    }
  }]
}

 注意：无论是resource，还是其下的exclude、include、not、or、and，

 其值可以为function、string(字符串开头判定)、regex、array(funciton string, regex组合)

 

 与resource并列的，还有个resoureceQuery参数，

 其值参照resource参数配置，用来测试通过import/require引入的模块参数是否符合要求，比如

{
  test: /.css$/,
  resourceQuery: /inline/,
  use: 'url-loader'
}

 

 可以匹配：

 

import Foo from './foo.css?inline'

 

 RuleSet.normalizeCondition这个方法是实现and or exclude include not的关键，逻辑与的关系

  

 比如resource配置代码，解析为：

 符合js结尾的文件，并且满足在exclude指定的目录中，同时不在include指定的目录中，才使用babel-loader