react如何使用@引入文件路径?

react如何使用@引入文件路径?

问题: 最近忙于毕设,使用react脚手架搭建的项目,在引入文件时出现了下面的情况:
在这里插入图片描述
预期效果:
在这里插入图片描述
这样大大提升了代码的美观度,而且简洁明了。

1、暴露配置文件

react官方脚手架默认是将 webpack 配置隐藏起来了,在进行配置之前需要将 webpack 配置暴露出来。

npm run eject
# or
yarn run eject

会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回?
输入 y 回车
成功之后 在项目根目录出现 config 文件夹,在 config 文件夹中找到 webpack.config.js 文件:

在这里插入图片描述

2、配置

找到alias
在这里插入图片描述
在alias中添加一行:

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

在这里插入图片描述
你以为这样就结束了?

3、重新启动项目

使用@引入文件后,一定要重新启动!!!

一定要重新启动!!!
一定要重新启动!!!
一定要重新启动!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值