配置 Webpack resolve alias 簡化相對路徑 import

webpack 配置

在 js 中 import 相對路徑代碼的時候經常出現路徑層級較深的情況，引入起來比較麻煩（雖然 webstorm 支持提示簡化了不少），所以在 webpack 中可以做如下配置：

        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
            }
        },

於是 import {getJson, del} from '../../../../model/apiUtils'; 就可以寫成 import {getJson, del} from '@/model/apiUtils';

當然，使用 resolve.modules 也可以達到類似效果：

        resolve: {
            modules: [
                context,
                'node_modules',
            ]
        },

這樣配置的話引入語句就變成了 import {getJson, del} from 'model/apiUtils。

不過這樣的缺陷也很明顯，如果自己的某個文件夾與 node_modules 下的組件同名的話會忽略後者，這樣可能無法達到我們想要的效果，所以推薦使用 alias 模式。

eslint 配置

不過上述配置之後，在 eslint 裏面會提示：

Unable to resolve path to module '@/component' import/no-unresolved

解決辦法是使用 eslint-import-resolver-alias，在 eslint 配置中增加如下代碼：

"settings": {
    "import/resolver": {
      "alias": {
        "map": [
          ["@", "./src"]
        ],
        "extensions": [".js", ".jsx", ".json"]
      }
    }
  },

Over