无需eject Create-React-App，如何升级Webpack至5.76.0及以上？

方案1：升级react-scripts到兼容Webpack 5.76.0+的版本 #

react-scripts 5.0.1之后的部分后续版本已将内置Webpack升级至5.76.0及以上，你可以直接尝试升级react-scripts：

• 执行升级命令：npm install react-scripts@latest，也可指定明确版本（比如react-scripts@5.1.1，需提前确认该版本对应的Webpack版本达标）
• 升级后验证Webpack版本：运行npm list webpack，确认版本满足5.76.0+要求

方案2：使用CRACO（Create React App Configuration Override）替换Webpack版本 #

CRACO支持在不eject的前提下修改CRA的底层配置，包括指定自定义Webpack版本：

1. 安装CRACO依赖：

   npm install @craco/craco --save-dev
   

2. 在项目根目录创建craco.config.js文件，配置指定Webpack版本：

   module.exports = {
     webpack: {
       version: "5.76.0", // 或更高符合要求的版本
       configure: (webpackConfig) => {
         // 按需添加其他Webpack配置修改
         return webpackConfig;
       },
     },
   };
   

3. 修改package.json中的脚本命令，替换为CRACO执行：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

4. 安装指定版本的Webpack：

   npm install webpack@5.76.0 --save-dev
   

5. 启动项目验证配置：npm start

方案3：使用react-app-rewired + customize-cra组合修改配置 #

这两个工具搭配也能实现不eject替换Webpack版本：

1. 安装依赖包：

   npm install react-app-rewired customize-cra --save-dev
   

2. 在项目根目录创建config-overrides.js文件：

   const { override } = require('customize-cra');
   
   module.exports = override(
     (config) => {
       // 替换项目使用的Webpack版本
       config.resolve.alias.webpack = require.resolve('webpack@5.76.0');
       return config;
     }
   );
   

3. 修改package.json的脚本命令：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }
   

4. 安装指定版本的Webpack：

   npm install webpack@5.76.0 --save-dev
   

5. 启动项目确认配置生效

内容的提问来源于stack exchange，提问作者conlonj25