react中使用craco自定义配置

使用create-react-app创建项目时,默认情况下webpack的配置是隐藏的,你可以使用eject将所有的配置暴露出来,但你一旦这么做了,是无法撤销的,这是一个不可逆的操作。当然,如果你已经对webpack特别熟练了就另当别论了。下文是在不暴露配置的情况下,实现配置的自定义,使用的是craco包。

1、安装craco

javascript 复制代码
npm i @craco/craco
// or
yarn add @craco/craco

2、修改package.json的scripts属性

javascript 复制代码
/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

3、在项目根目录创建一个 craco.config.js 用于修改默认配置。

javascript 复制代码
/* craco.config.js */
module.exports = {
  // ...
};

至此就结束了,小伙伴们有更好的方式欢迎在评论区交流学习

相关推荐
你别说话了8 分钟前
Vue实现高效拖拽效果 vue-Draggable
前端·vue.js
万物智能16 分钟前
PWM散热风扇设置—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端·算法
前端柱子27 分钟前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端
梦想的颜色28 分钟前
【AI科普】AI 时代,纯 H5+CSS PK React & Vue:前端技术孰优孰劣深入剖析
ai·前端框架·大模型·vue·react·html5·vibecoding
阿虎儿28 分钟前
我的 HTML 样板(HTML Boilerplate)
前端·html
传奇开心果编程30 分钟前
【ArkUI 练中学】第5课:路由导航与页面跳转
学习·华为·前端框架
Amos_Web32 分钟前
Rspack 源码解析(八):Module、Chunk 与 Runtime ID
前端·rust·源码阅读
彭于晏分晏38 分钟前
深入理解 Vue 3 响应式原理:从 Proxy 到依赖收集
前端
晚安日记wanna41 分钟前
Vue3 script setup 的四层追问答到第三层才算过关
前端·vue.js·面试
前端柱子1 小时前
Chaikin‘s Corner Cutting 算法 应用canvas绘制平滑的曲线
前端