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

相关推荐
余道各努力,千里自同风2 分钟前
小程序中获取元素节点
前端·小程序
PineappleCoder5 分钟前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost5 分钟前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求
焚 城20 分钟前
EXCEL(带图)转html【uni版】
前端·html·excel
我家媳妇儿萌哒哒24 分钟前
Vue2 elementUI年份区间选择组件
前端·javascript·elementui
笨笨狗吞噬者31 分钟前
【uniapp】小程序体积优化,分包异步化
前端·微信小程序·uni-app
该用户已不存在31 分钟前
Golang 上传文件到 MinIO?别瞎折腾了,这 5 个库拿去用
前端·后端·go
snows_l37 分钟前
JavaScript 性能优化实战大纲
前端
文心快码BaiduComate1 小时前
文心快码3.5S开发古风射覆小游戏,它帅到我了!
前端·后端·程序员
佛系菜狗1 小时前
防抖和节流-防抖鸿蒙版本实现
前端