配置 Webpack resolve alias 简化相对路径 import
2018-09-12 20:36
1181 查看
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
相关文章推荐
- webpack 使用别名(resolve.alias)解决scss @import相对路径导致的问题
- Webpack中使用相对路径定义别名
- JAVAWEB相对路径的配置
- 微软企业库连接access,web.config相对路径配置
- 解决idea web 配置相对路径问题
- Error: Can't resolve 'fs' in (webpack 2配置CSS loadeers)
- webpack配置别名alias出现的错误匹配
- webpack resolve extensions 配置
- 使用webpack的动态模块功能实现类似包扫描来简化配置
- sqlite+javaweb 相对路径配置数据库
- webpack配置import的时候忽略文件后缀名(.jsx .vue)
- 使用import简化spring的配置 spring import 标签的解析 使用import或加载spring配置时,报错误There is no ID/IDREF 多个Spring配置文件import resource路径配置
- webpack中alias别名配置
- webpack公共组件引用路径简化小技巧
- webpack配置技巧--路径
- 使用webpack打包的后,公共请求路径的配置问题
- 深入理解Webpack 中路径的配置
- 使用webpack打包的后,公共请求路径的配置问题
- web.xml中的welcome-file(访问相对路径时配置默认访问文件)
- vue和webpack打包项目相对路径修改的方法