React项目：配置别名路径@解析、和别名路径联想提示

别名路径配置，实际上分成两部分：
1）广泛意义上的路径解析配置（Webpack），把@/解析为src/
2）路径联想配置（是针对vscode编译器的配置），vscode在输入@/时，自动联想出来对应的src/下的子级目录。

路径解析配置

craco插件介绍

CRA（create-react-app）本身把webpack的配置包装到了黑盒里，无法直接修改。如果需要定制，需要借助一个插件craco，这个插件提供了CRA的一些扩展配置。

https://craco.js.org/

配置步骤

1. 安装craco

npm i -D @craco/craco

2. 在项目根目录下创建配置文件 craco.config.js
3. 配置文件craco.config.js中添加路径解析配置
4. 包文件package.json中修改启动和打包命令，替换原先的启动和打包命令

进行配置

安装craco

安装完成后，package.json文件中自动更新了依赖：

在项目根目录下创建配置文件 craco.config.js，创建解析配置

包文件package.json中修改启动和打包命令

重新启动项目

在vscode集成终端中运行npm run start，重新启动项目。

到代码中验证别名解析是否正确

新建一个文件test.js：

在index.js文件中使用别名导入：

浏览器控制台输出了正确的结果：

联想路径配置

配置步骤

vscode的联想配置，需要我们在项目根目录下面新增 jsconfig.json 文件，加入配置之后，vscode会自动读取配置，帮我们自动联想提示。

步骤：
1）项目根目录下面新增配置文件jsconfig.json
2）在配置文件中增加路径提示配置

进行配置

在代码中验证是否有联想提示