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 目录

相关推荐
计算机魔术师1 小时前
OpenAI 发布 GPT-6 Astra:多项基准刷新纪录, cybersecurity 能力达 Critical 阈值
前端
xy34531 小时前
Axure9.0中继器遮罩实现方法
前端·ui·html·axure·原型·产品设计
风骏时光牛马1 小时前
智能任务自动化协同AI工作流
前端
IT_陈寒1 小时前
Python的多线程居然是个假把式?搞清GIL让我少熬三天夜
前端·人工智能·后端
宿6741 小时前
vue3-config
前端·javascript·vue.js
明月_清风1 小时前
位图与布隆过滤器:海量数据下的"存在性判断"艺术
前端·后端·算法
明月_清风2 小时前
Hash 表从入门到精通:Go 实战与工程细节
前端·后端·算法
非凡ghost3 小时前
AI修图不“造假“,摄影师的出片效率加速器
服务器·前端·人工智能·电脑
2601_951615203 小时前
网页设计模板源码 web前端模板网页源码下载
前端
mmsx3 小时前
osmdroid 地图实战 03|地图的"分层世界":离线方案、图层模型与 Overlay 体系
android·前端