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

相关推荐