webpack 5 类型定义中 "..." 类型的含义是什么？

你在webpack的types.d.ts里看到的"..."是TypeScript字符串字面量类型，是webpack专门为多配置合并场景设计的特殊标识，仅会出现在数组类型的配置项的联合类型定义中。

它的核心作用是在合并多层webpack配置时，保留继承自上层配置的原有数组项，不需要你手动把上层配置的所有数组项全部重写一遍。

用法示例 #

比如你有一份公共基础配置，已经提前定义了处理JS、CSS文件的loader规则，在编写业务自定义配置时就可以这么写：

module.exports = {
  module: {
    rules: [
      // 保留基础配置中所有已定义的loader规则
      "...",
      // 额外新增处理Vue文件的规则
      { test: /\.vue$/, use: "vue-loader" }
    ]
  }
}

如果不添加这个"..."标识，你自定义的rules数组会直接覆盖上层的全部规则，而不是追加新规则。

对应你给出的两个类型定义场景 #

• rules?: (RuleSetRule | "...")[];：module.rules配置数组中，除了填写正常的loader规则对象外，还可以填写"..."继承上层的规则配置
• minimizer?: ((this: Compiler, compiler: Compiler) => void | WebpackPluginInstance | "...")[];：optimization.minimizer压缩器配置数组中，填写"..."就可以保留默认/上层配置的压缩器，你可以在它前后新增自定义压缩插件，不需要全部重写默认压缩配置。

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