Webpack 5升级后如何正确编写cacheGroups的JSDoc类型标注？

类型报错本质是Webpack 5的类型定义结构变化导致：

• Webpack 5中optimization.splitChunks字段的类型为联合类型false | OptimizationSplitChunksOptions，允许传false直接关闭代码分割能力。
• 顺着配置类型链索引webpack.Configuration['optimization']['splitChunks']['cacheGroups']时，TypeScript会遍历联合类型的所有分支，当分支为原始值false时不存在cacheGroups属性，因此抛出类型不存在的错误。
• Webpack 5已将Webpack 4中嵌套在webpack.Options命名空间下的CacheGroupsOptions类型，改为顶层直接导出的独立公共类型，不再需要从嵌套的配置对象路径中提取类型。

方案1：直接使用Webpack 5顶层导出的缓存组类型（推荐） #

直接引入Webpack暴露的独立CacheGroupsOptions类型，无需嵌套索引配置结构，写法最简洁，匹配官方类型的设计思路：

/**
 * @return {Record<string, import('webpack').CacheGroupsOptions>}
 */
function buildWebpackCacheGroups() {
  // 原有业务实现
}

方案2：嵌套索引时过滤联合类型中的false分支 #

如果需要从webpack.Configuration的类型结构中推导类型，可先通过类型工具把联合类型中表示“关闭分割”的false分支排除，再提取cacheGroups属性，即可通过类型检查：

/**
 * @return {Record<string, Exclude<NonNullable<webpack.Configuration['optimization']>['splitChunks'], false>['cacheGroups']>}
 */
function buildWebpackCacheGroups() {
  // 原有业务实现
}

类型工具说明：

• NonNullable：移除optimization字段本身的undefined可选值，避免索引时触发可选属性不存在的错误
• Exclude<类型, false>：从splitChunks的联合类型中移除false分支，保留完整的代码分割配置对象类型，此时提取cacheGroups属性可匹配正确的类型定义。

如果使用的Webpack 5版本较早（如5.0~5.1的早期发布版本），可对照版本对应的类型定义确认顶层导出的CacheGroupsOptions是否存在，若不存在则优先使用方案2的类型推导写法，兼容性更好。

内容的提问来源于stack exchange，提问作者XäpplI'-I0llwlg'I