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

wswtfjt7  于 2024-01-08  发布在  Webpack
关注(0)|答案(1)|浏览(140)

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

  1. ...
  2. module:{
  3. rules: [
  4. {
  5. test: ... // the first one, commonly used in most example we can found on internet
  6. include: ... // the second one
  7. resource: ... // the third one
  8. use: ['style-loader','css-loader'],
  9. },
  10. ...
  11. ],
  12. ...
  13. }

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

规则测试

包括所有通过测试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编写会很复杂:

  1. {
  2. resource: {
  3. and: [
  4. /\.js$/,
  5. /src\/directory/,
  6. ],
  7. not: /node_modules/
  8. }
  9. }

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

展开查看全部

相关问题