react脚手架创建项目,配置别名(alias)

React脚手架项目使用 react-scripts 封装了webpack配置,所以我们需要通过 config-overrides 或者 eject 的方式来修改webpack配置

可以的话 ,创建项目的时候可以使用vite ,我这是老项目屎山 懒得迁移 ,但还得改呀

1. 安装依赖 :

复制代码
npm install react-app-rewired customize-cra --save-dev

2. 根目录创建一个 config-overrides.js

javascript 复制代码
const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackAlias({
    ['@']: path.resolve(__dirname, 'src')
  })
);

3. 修改 package.json 中的 scripts,将原本的 react-scripts 替换为 react-app-rewired

javascript 复制代码
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
}

结语 : 可以在React脚手架项目中成功配置别名 @,将其指向 src 目录

相关推荐
雪芽蓝域zzs3 小时前
第三节:目录结构重构(仿若依,优化层级,layout 与 components 同级)
前端·vue.js·重构
子非鱼a4 小时前
【WEB】[NewStarCTF 公开赛赛道]UnserializeOne
前端·javascript·html
南雨北斗4 小时前
Vue3 v-model中的自动事件绑定
前端
雪芽蓝域zzs5 小时前
第八节:Element Plus 基础、封装通用组件 + 路由守卫
前端·vue.js
码视野5 小时前
基于 Spring Boot + Vue3 的【智慧公厕微负压排风除臭与客流人感空间占用导引中台】设计与实现(含PRD/三端高保真源码/大屏)
前端·vue.js·人工智能·spring boot·后端
计算机魔术师6 小时前
刚赔了15亿又来被告?索尼华纳联手把Anthropic告上法庭
前端
笑霸final6 小时前
不用上传服务器!用 Vue3 + ONNX Runtime Web 在浏览器本地实现智能抠图
运维·前端·图像处理·ai·onnx·canva可画·web性能优化
月月大王的3D日记6 小时前
Three.js 入门系列(9):从零搭一座“闹鬼小屋”
前端·javascript
TingTing6 小时前
Vue3动态组件库建设
前端
码上暴富6 小时前
Cursor / VS Code 自定义文件颜色
前端·vscode