识别webpack路径别名(alias)

假设项目使用了webpack，且配置了一些路径别名，如果我们在项目中引用文件时使用webpack配置里配的路径别名，对提高编译速度是会有一定的加成的，效果虽然没实测过，但是肯定不会效果拔群，属于如果方便的话能用就用吧，不方便的话就算了，没必要为了方便使用这个功能特意去换编辑器/IDE。

一、案例

回到正题，假设你的webpack别名配置如下：

const resolve = (tempPath) => path.join(paths.appSrc, '../', tempPath)
if (path.relative(paths.appPath, baseUrlResolved) === '') {
    return {
        src: paths.appSrc,
        '@': resolve('src'),
        '@api': resolve('src/api'),
        '@assets': resolve('src/assets'),
        '@img': resolve('src/assets/img'),
        '@css': resolve('src/assets/css'),
        '@component': resolve('src/components'),
        '@constants': resolve('src/constants'),
        '@containers': resolve('src/containers'),
        '@models': resolve('src/models'),
        '@routes': resolve('src/routes'),
        '@tests': resolve('src/tests'),
        '@utils': resolve('src/utils'),
    };
}

二、IDEA方案

如果你和我一样，主用的是IDEA，可以直接打开IDEA配置，在搜索栏搜"webpack"，然后就会看到一个可以选择webpack配置文件的地方，点击选中webpack配置文件后保存后，IDEA就能自动识别别名路径了。因为太过简单所以不贴图了。 webstorm我没装，不过既然是同一个公司出的，大概率也会支持。

三、vscode方案

但是我们的团队成员大部分是用vscode的，所以要按下面的方式处理（只需要修改代码配置，不用每个开发同学都去设置vscode的配置项，所以比较好推行）。先打开项目根目录，新建jsconfig.json文件，填入如下内容（根据你的webpack实际配置的别名来修改）：

{
    "compilerOptions": {
        "jsx": "react",
        "target": "ES6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ],
            "@api/*": [
                "src/api/*"
            ],
            "@assets/*": [
                "src/assets/*"
            ],
            "@img/*": [
                "src/assets/img/*"
            ],
            "@css/*": [
                "src/assets/css/*"
            ],
            "@component/*": [
                "src/components/*"
            ],
            "@constants/*": [
                "src/constants/*"
            ],
            "@containers/*": [
                "src/containers/*"
            ],
            "@models/*": [
                "src/models/*"
            ],
            "@routes/*": [
                "src/routes/*"
            ],
            "@tests/*": [
                "src/tests/*"
            ],
            "@utils/*": [
                "src/utils/*"
            ]
        }
    }
}

这样就ok了。需要注意的时，当用vscode打开一个目录时，这个文件需要在打开目录的顶层才有效。如果你的代码仓库含有多个子项目，你在子项目A的根目录下配置了jsconfig.json文件的话，用vscode直接打开总项目是没用的，需要用vscode直接打开子项目A对应的目录方能生效。

识别webpack路径别名(alias) ​

一、案例 ​

二、IDEA方案 ​

三、vscode方案 ​

识别webpack路径别名(alias)

一、案例

二、IDEA方案

三、vscode方案