TypeScript中webpack `rules`的types.d.ts定义里"..."[]有什么含义？

这里的"..."完全不是TypeScript的特殊语法，没有什么特殊的类型规则，把整个联合类型拆开读就很好理解：

• (RuleSetRule | "...")[] 是一个元素为联合类型的数组，数组里的元素只允许两种合法值：
  • 符合RuleSetRule结构的普通webpack规则对象，就是平时写的带test、use、loader字段的配置项
  • 一个严格匹配字符串值"..."的字面量类型，意思是这个位置的字符串必须一分不差是三个点，多一个少一个、字面对不上都算类型不合法

这个字符串到底是干嘛用的 #

这个精确取三个点的字符串，是webpack自己的配置体系实现的特殊占位语法，用来解决规则数组的继承问题：
你写自己的webpack配置时，完全可以在rules数组的任意位置写上字符串"..."，webpack加载配置的时候，会自动把这个占位符替换成从公共预设、继承的上层配置里拿到的所有规则内容，不用手动把所有上层规则都拷贝到自己的配置数组里。

举个实际写配置的例子：

module.exports = {
  module: {
    rules: [
      // 把自己写的SVG处理规则放在最前面，优先匹配
      { test: /\.svg$/, type: 'asset/resource' },
      // 这里的"..."会把所有基础预设里的规则自动插到这个位置
      "..."
    ]
  }
}

为什么TypeScript不干脆把类型写成(RuleSetRule | string)[] #

如果放开让所有字符串都能往规则数组里塞，类型检查就起不到防护作用了。特意把允许的字符串值精确限定为"..."，就是为了做拼写校验：要是写占位符的时候手滑写成了".."或者"...."，TS会直接报错，不会等配置跑起来了才发现占位符不生效。

容易搞混的点 #

千万别把这个字符串"..."和JS本身的数组展开运算符...搞混：

• 展开运算符是JS语言层面的语法，作用是把已有数组/对象的内容拆解合并到当前位置
• 这里的"..."就是个普通的字符串，只是刚好选了三个点当标识，所有的特殊处理都是webpack的配置解析逻辑做的，TS只是把这个合法的取值通过类型定义给明确了而已。

内容的提问来源于stack exchange，提问作者Liam_1998