react中使用craco,针对路径转换，修改webpack别名路径配置

1.0 首先下载craco依赖包

npm install @craco/craco -D

2.0 在项目根目录下面新建craco.config.js文件,里面内容配置为

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

3.0 在package.json文件里面更改启动项命令：

//由原始的： 
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
//更改为:
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

4.0 前面三步更改完成后就可以使用@去进行查找文件，比如：
import Login from '../pages/Login' 可以替换为import Login from '@/pages/Login'
但是如果想要'@/’之后有提示信息，需要进行添加另外一个文件
在根目录下面新增 jsconfig.json文件，文件内容如下：

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

那么以上就是使用craco针对路径转换，修改webpack别名配置的整个过程，可以使用@查找文件，并且对查找的文件进行提示！