React 脚手架修改 Webpack 配置的两种方案

npm run eject：

可以通过执行 npm run eject 弹出 Webpack 配置信息，直接修改。不推荐。

craco：

使用 craco （create-react-app config）在 React 脚手架的基础上进行 Webpack 配置。使用最多。

1. 安装 craco：npm install @craco/craco。
2. 在根目录下创建 craco.config.js 配置文件编写配置信息。

   const path = require('path')
   
   module.export = {
     webpack: {
       // 设置路径别名。在项目中就可以使用 @ 来代替根目录下的 src 路径了
       alias: {
         '@': path.resolve(__dirname, 'src')
       }
     }
   }
   

3. 使用 craco 启动项目：将 package.json 中 scripts 里的 react-scripts 改为 craco，才能在运行项目将 craco.config.js 中的配置合并到 React 脚手架的配置信息中。