文档章节

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

郁也风
 郁也风
发布于 2018/09/12 20:36
字数 315
阅读 1940
收藏 0

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

© 著作权归作者所有

郁也风
粉丝 16
博文 31
码字总数 17009
作品 0
长宁
项目经理
私信 提问
sass或less文件中的波浪线~

在 webpack 中,一些 loader 会把不以 开头的绝对路径作为相对路径处理,如果需要使用模块路径,需要在路径前加一个波浪线 vue-html-loader and css-loader translates non-root URLs to rel...

gongzhen
08/12
0
0
webpack系列之三resolve

作者:崔静 介绍 webpack 的特点之一是处理一切模块,我们可以将逻辑拆分到不同的文件中,然后通过模块化方案进行导出和引入。现在 ES6 的 Module 则是大家最常用的模块化方案,所以你一定写...

滴滴WebApp架构组
02/20
0
0
6个必须掌握的基础配置 - [webpack第一篇]

webpack实战系列全目录 webpack6个常见的基础配置知识点 webpack 16个常见的实际场景【敬请期待】 webpack15个常见的优化策略【敬请期待】 webpack从0打造兼容ie8的脚手架【敬请期待】 webp...

沉默抒怀者
06/03
0
0
vue项目中有时间文件路径上有@,代表什么意思?

./这是相对路径的意思,同级目录。 ../上级目录。 @/这是webpack设置的路径别名。 在build/webpack.base.conf这个文件里面设置了@具体指的是什么 resolve: { // 路径别名 alias: { '@': reso...

飞翔的熊blabla
01/15
0
0
Webpack脚手架

1. 什么是webpack? webpack是一个现代Javascript应用程序的模块打包器,当webpack处理应用程序时,他会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包...

R_JsBest
2017/12/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

华为手机翻译功能怎么使用?这三种方法请务必收藏

华为手机翻译功能怎么使用?在我们的生活中会经常遇到翻译问题,许多外语不好的朋友该怎么办呢?华为手机已经为我们解决了这个问题,今天小编就教大家学会使用华为手机中的三种翻译技巧,需要...

翻译小天才
6分钟前
0
0
企业服务软件开发中需要注意的三个问题

在开发企业服务软件时,我们需要分为:业务需求、用户需求、产品需求,三大需求层次,三个层次互相关联,企业服务软件开发首先要服务业务,需要满足业务的需求,再关注用户体验,也就是用户需...

积木创意科技
9分钟前
1
0
C++容器底层数据结构

内置数组: int arr[10][10];memset(arr,0,10*10*sizeof(int)); //初始化int tmp[10][10];memcpy(arr, tmp, 10 * 10 * sizeof(int));//拷贝 void *memcpy(void *destin, void *source,......

SibylY
10分钟前
1
0
Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
38分钟前
6
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
40分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部