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别名配置的整个过程,可以使用@查找文件,并且对查找的文件进行提示!
标签:路径,react,start,webpack,craco,build,scripts From: https://www.cnblogs.com/guhonghao/p/18183841