webpack 的 alias 功能可以在 import 或 require 一个文件的时候使用别名，避免文件路径写的过长。

# webpack 配置
resolve: {
    alias: {
        'common': __libPath + '/utils/common.js',
        'constant': __libPath + '/utils/constant/index.js',
        '@': path.resolve(__dirname, './src')
    }
},

# js 中使用别名引入
import Constant from 'constant'
import Api from "@/api";

但是这种写法 IDE 和编辑器的文件导航默认不支持，我们不能直接点击代码进行文件导航。在开发中，Source code navigation （代码导航）是非常重要的，可以大大地提高我们的工作效率。所以我们得让编辑器支持该功能。

JetBrains 系列 IDE

我们拿 phpstorm 来举例，在 Preferences > Languages & Frameworkds > JavaScript > Webpack 里配置一下 webpack 配置文件的目录即可。

VsCode

VsCode 可以通过 jsconfig 文件配置。在项目的根目录下新建一个 jsconfig.json 文件，内容如下：

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

参考：

1. https://code.visualstudio.com/docs/languages/jsconfig
2. https://code.visualstudio.com/docs/languages/jsconfig#_using-webpack-aliases