webpack配置alias后ts找不到模块

发表于:2019-04-14

vscode开发环境中webpack配置alias导致在ts找不到模块

环境:

  • mac
  • vscode
  • typescript

webpack配置

module.exports = {
  //...
  resolve: {
    alias: {
      '@': path.join(__dirname, '../src')
    }
  }
};

在项目中使用alias功能,如下图:

直接给了一个警告,虽然程序是可以正常运行的,但是无法通过点击跳转到文件,还以为项目是有bug,这显然是不能接受的。

为了解决这个问题,需要借助tsconfig,尽管webpack已经配置好了alias, 可是ts并不认账。

tsconfig.json配置如下

需要在compilerOptions 增加2个字段, baseUrl 指定当前工程的路径, paths 用于对别名的映射。

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ...
  }
}

在此就能解决上述问题了,如果不行可能需要重启vscode。

编辑器
其他