cra(create-react-app)配置别名路径@ 以及Vscode联想路径配置

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

一、配置步骤：

1. 安装craco
npm i -D @craco/craco

2. 项目根目录下创建配置文件craco.config.js（与src同级）

3. 配置文件中添加路径解析配置（代码如下方二具体代码所示）

4. 包文件中配置启动和打包命令（代码如下方二具体代码所示）


二、具体代码

1. craco.config.js代码如下所示（配置文件中添加路径解析配置）：

const path = require('path');

module.exports = {
    webpack: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
}


2. package.json修改的代码如下所示（包文件中配置启动和打包命令）：

"scripts": {
    "start": "craco start",
    "build": "craco build"
}


三、在页面中使用

import sum from '@/sum'; // src文件夹下有个sum文件夹，sum文件夹有个index.js文件


四、联想路径配置（效果：在VsCode输入@/时会提示有哪些文件）

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

jsconfig.json代码如下（根目录下创建，与src同级）：

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