react中使用craco自定义配置

心情无变化2023-12-14 16:20

使用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 = {
  // ...
};

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