配置 Webpack resolve alias 简化相对路径 import

原创
2018/09/12 20:36
阅读数 1.6W

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部