【React】配置别名路径@

别名路径配置

1. 路径解析配置（webpack）

CRA本身把webpack配置包装到了黑盒里无法直接修改，需要借助一个插件 - craco

步骤

1. 安装craco

npm i -D @craco/craco

2. 项目根目录下创建配置文件 craco.config.js
3. 配置文件中添加路径解析配置
   

const path = require('path')
module.exports = {
  // webpack配置
  webpack:{
    // 配置别名
    alias:{
      // 约定： 使用 @ 表示 src文件所在路径
      '@':path.resolve(__dirname,'src')
    }
  }
}

4. 包文件package.json 中 配置启动和打包命令
   
   
5. 启动项目 ，执行 npm run start

2. 路径联想配置（VsCode）

 VsCode的联想配置，需要我们在项目目录下添加 jsconfig.json 文件，
 加入配置之后VsCode会自动读取配置帮助我们自动联想提示

步骤

1. 根目录下新增配置文件 jsconfig.json
2. 添加路径提示配置
   

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}