react修改webpack配置，添加别名

第一种方式

通过 npm run eject 直接暴露出来react所有的webpack配置文件，暴露出来之后，过程不可逆
而且失去了 react-scripts 的统一管理的好处，而且react的webpack中的内容也非常的多，更改起来也不太容易

第二种方式

通过安装 npm i @craco/craco -D 来帮着我们配置webpack
npm 地址

• 在项目中安装 npm i @craco/craco -D
• 在项目的跟目录配置 craco.config.js

// 添加自定义webpack配置
const path = require('path')
module.exports = {
    webpack: {
    // 配置别名
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    }
}

• 打开package.json更改scripts内容，由craco接管启动命令

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

• 在项目中使用

import { Routes, Route } from 'react-router-dom'
import Home from '@/pages/Home'
import About from '@/pages/About'
function App () {
    return (
        <Routes>
            <Route path="/" element={<Home />}></Route>
            <Route path="/about" element={<About />}></Route>
        </Routes>
    )
}

输入 @ 符号时，可能不会提示路径
可以在 项目的根目录创建一个jsconfig.json或者tsconfig.json,添加如下内容

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

保存，重启编辑器即可，有些电脑配置好的不需要重启
这个识别@符号给出文件路径提示的功能是 vsCode 提供的，跟项目没有关系