别名路径配置
1. 路径解析配置(webpack)
CRA本身把webpack配置包装到了黑盒里无法直接修改,需要借助一个插件 - craco
步骤
- 安装craco
npm i -D @craco/craco
- 项目根目录下创建配置文件
craco.config.js
- 配置文件中添加路径解析配置
const path = require('path')
module.exports = {
// webpack配置
webpack:{
// 配置别名
alias:{
// 约定: 使用 @ 表示 src文件所在路径
'@':path.resolve(__dirname,'src')
}
}
}
- 包文件
package.json
中 配置启动和打包命令
- 启动项目 ,执行
npm run start
2. 路径联想配置(VsCode)
VsCode的联想配置,需要我们在项目目录下添加 jsconfig.json 文件,
加入配置之后VsCode会自动读取配置帮助我们自动联想提示
步骤
- 根目录下新增配置文件 jsconfig.json
- 添加路径提示配置