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

相关推荐
+VX:Fegn08951 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
Nicander3 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan4 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师5 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒6 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
神秘的猪头6 小时前
React 脱围机制(二):重新理解 useEffect——它不是生命周期,而是同步外部系统
react.js
卡布鲁6 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼6 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
步行cgn6 小时前
Spring p 命名空间注入详解
java·前端·spring
何何____6 小时前
Vue 生命周期详解
前端·javascript