如何让TypeScript优先使用webpack内置类型而非@types/webpack？

以下是几个更优雅的解决方案，替代全局强制升级@types/webpack的临时方案：

1. 精准排除特定插件的@types/webpack依赖 #

针对依赖@types/webpack 4.x的插件，直接让它们不安装该类型包，TypeScript会自动使用Webpack 5自带的类型：

• npm 8+：在package.json中添加overrides配置：

  "overrides": {
    "目标插件名称": {
      "@types/webpack": false
    }
  }
  

• Yarn：在package.json的resolutions中做精准指向：

  "resolutions": {
    "目标插件名称/@types/webpack": false
  }
  

  这种方式只会影响指定插件，不会全局修改依赖版本，更精准可控。

2. 调整TypeScript类型查找优先级 #

通过tsconfig.json配置，让Webpack 5自带的类型优先被加载：

• 方法一：修改typeRoots顺序，把Webpack自带类型目录放在@types前面：

  {
    "compilerOptions": {
      "typeRoots": [
        "./node_modules/webpack/types",
        "./node_modules/@types"
      ]
    }
  }
  

• 方法二：使用types数组指定只加载Webpack自带类型（注意：此配置会关闭自动加载所有@types下的类型，需手动添加其他需要的类型，比如node）：

  {
    "compilerOptions": {
      "types": ["webpack"]
    }
  }
  

3. 升级或替换老旧插件 #

检查依赖@types/webpack 4.x的插件是否有适配Webpack 5的新版本：

• 如果插件已更新，直接升级到最新版本，多数适配Webpack 5的插件会移除对@types/webpack的依赖，转而使用Webpack自带类型。
• 若插件无更新，可寻找功能类似、支持Webpack 5的替代插件，从根源解决依赖冲突问题。

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