webpack使用alias后丢失快速链接和智能提示问题

webpack设置快捷访问的别名alias

为了方便深层次文件的快速引入，我们通常都会在webpack层面配置alias，如下所示

// 配置
{
	...otherOptions,
	resolve: {
    alias: {
      '@': path.resolve('src'),
    }
  },
}

// 使用import test from @/test.js; 访问 src/test.js;

引发的问题

1. 丢失点击引入代码(如：import roleIcon from '@/images/role.png';)快速跳转到该目标文件能力；
2. 引入@时没有智能提示

解决办法

在根目录下创建一个jsconfig.json的文件，并写入如下代码即可。

{
  "include": [
    "./src/**/*"
  ],
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*", "./src/*/index"]
    }
  }
}