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

相关推荐
HUMHSX15 小时前
Vue 项目启动全流程解析:从入口文件到全局指令注册与页面渲染
前端·javascript·vue.js
有颜有货15 小时前
PMC生产排产的4种算法,一次讲清
java·服务器·前端
小虎牙00715 小时前
Android kotlin图片库Coil源码详解
android·前端
随风一样自由15 小时前
【前端领域】前端开发核心应用场景与落地实践
前端·前端框架
an3174216 小时前
弹窗数据流设计的两种高阶架构实践
前端·vue.js·架构
谢尔登16 小时前
【React】 状态管理方案
前端·react.js·前端框架
用户21366100357216 小时前
Vue商品详情与放大镜组件
前端·javascript
半个落月16 小时前
从Tapas小Demo理清localStorage、事件与this
前端·javascript
李明卫杭州16 小时前
Vue2 中 v-model 处理不同数据结构的技巧
前端·javascript·vue.js
李明卫杭州17 小时前
使用 computed 处理 v-model 复杂数据结构
前端·javascript·vue.js