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

Question

在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'],
        },
        ...
    ],  
    ...
}

文档没有解释它们：

Rule.test
包括所有通过测试断言的模块。如果您提供一个Rule.test选项，则不能同时提供Rule.resource. 详情请参阅Rule.resource和Condition.test

Rule.include
包含与任何这些条件匹配的所有模块。如果您提供一个Rule.include选项，则不能同时提供Rule.resource. 详情请参阅Rule.resource和Condition.include

Rule.resource
ACondition与资源匹配。详情请参阅Rule条件。

他们每个人都是Condition类型。其中一些是相互排斥的。但每个的目的是什么？我们什么时候应该使用每一个？

只要有，test一切就都清楚了。

Answer 1

我不熟悉 Webpack 的完整历史，但我相信Rule.resource这是一个正在逐步淘汰的遗留选项，因为几乎没有人在使用它。

您可以使用Rule.resource子条件，否则使用单个正则表达式编写起来会很复杂：

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

这看起来很像如何使用Rule.test、Rule.include和Rule.exclude选项，这些选项过去被称为快捷方式选项，但现在它们是主要选项。

如今，您使用它们的方式是将文件扩展名与 相匹配Rule.test，如果您需要列出特定目录或特定文件，您应该使用Rule.include或Rule.exclude。

这种约定使得配置易于阅读并且易于跨项目重用。

Rule.test实际上以Rule.include同样的方式工作，您甚至可以将它们合并为一个条件，但此时您不妨返回到Rule.resource.

目前与 的Rule.resource工作方式相同Rule.test，因此没有必要同时使用两者，这可能就是它们相互排斥的原因。