如何让IDE在TypeScript模块中使用Webpack解析别名

当然有办法解决这个问题！不用手动维护tsconfig.json里的compilerOptions.paths，也能让IntelliJ IDEA在TypeScript模块里识别webpack的别名，下面给你两个实用的方案：

IntelliJ IDEA本身就支持通过webpack配置来解析模块导入，只要做几步简单设置：

• 打开IDE的设置面板（快捷键Ctrl+Alt+S，或者通过File > Settings打开）
• 找到Languages & Frameworks > JavaScript > Webpack选项
• 在Webpack configuration file下拉框里，选中你项目中的webpack配置文件（比如webpack.config.js或者webpack.config.ts）
• 点击Apply保存设置，然后重启IDE或者重新加载项目

完成后，IDE就会自动根据webpack里的resolve.alias配置来识别TypeScript模块的导入路径，自动补全、跳转这些功能都会正常工作，完全不用碰tsconfig.json。

如果你的需求不仅是IDE补全，还希望TypeScript编译时不报错（毕竟TS编译器本身不认webpack别名），但又不想手动维护paths，可以用工具自动同步：

• 首先安装alias-hq这个工具：

  npm install alias-hq --save-dev
  

• 在项目根目录创建.alias-hq.js配置文件，内容如下（假设你的webpack配置在根目录）：

  module.exports = {
    webpack: './webpack.config.js'
  };
  

• 运行同步命令，自动把webpack的别名同步到tsconfig.json的paths：

  npx alias-hq sync tsconfig
  

• 你还可以把这个命令加到package.json的scripts里，比如：

  "scripts": {
    "sync-aliases": "alias-hq sync tsconfig"
  }
  

  以后每次修改webpack别名后，运行npm run sync-aliases就能自动更新tsconfig，完全不用手动编辑。

补充说明 #

• 方案1只解决IDE的识别和补全问题，TypeScript编译时还是会因为找不到别名路径报错，如果不需要编译时无错，方案1足够用。
• 方案2既解决IDE补全，又解决编译报错，而且全程自动同步，不用手动维护两份配置。

内容的提问来源于stack exchange，提问作者Sergey N.