webpack模块规则配置中的`test`、`include`、`resource`属性有什么区别?

wswtfjt7  于 9个月前  发布在  Webpack
关注(0)|答案(1)|浏览(106)

webpack.config.js中,我们可以使用3个不同的属性来确定模块:

...
module:{
    rules: [
        {
            test: ... // the first one, commonly used in most example we can found on internet
            include: ... // the second one
            resource: ... // the third one
            use: ['style-loader','css-loader'],
        },
        ...
    ],  
    ...
}

字符串
这些都不是解释性的:

规则测试

包括所有通过测试Assert的模块。如果您提供Rule.test选项,则不能同时提供Rule.resource。有关详细信息,请参阅Rule.resourceCondition.test

规则.包含

包括所有符合这些条件的模块。如果您提供Rule.include选项,则不能同时提供Rule.resource。有关详细信息,请参阅Rule.resourceCondition.include

规则资源

与资源匹配的Condition。请参阅Rule条件中的详细信息。
每一个都是Condition类型。其中一些是互斥的。但是每一个的目的是什么?我们应该在什么时候使用每一个?
如果只有test,那么一切就都清楚了。

uqdfh47h

uqdfh47h1#

我不熟悉Webpack的完整历史,但我相信Rule.resource是一个正在逐步淘汰的传统选项,因为几乎没有人使用它。
使用Rule.resource,你可以有子条件,否则使用单个RegExp编写会很复杂:

{
  resource: {
    and: [
      /\.js$/,
      /src\/directory/,
    ],
    not: /node_modules/
  }
}

字符串
这看起来很像您使用Rule.testRule.includeRule.exclude选项的方式,这些选项过去被称为快捷方式选项,但它们现在是主要选项。
现在,您使用它们的方式是将文件扩展名与Rule.test匹配,如果您需要列出特定目录或特定文件,则应该使用Rule.includeRule.exclude
这种约定使得配置易于阅读,并且易于在项目之间重用。
Rule.testRule.include实际上以相同的方式工作,您甚至可以将它们合并为一个条件,但此时您还不如回到Rule.resource
目前Rule.resourceRule.test的工作原理相同,所以两者都使用是没有意义的,这可能就是它们相互排斥的原因。

相关问题