react-scripts自动安装webpack4时如何配置项目使用webpack5

报错原因 #

react-scripts v4.0.3的依赖声明中固定了webpack版本为^4.44.2，直接手动安装webpack5会触发包管理器的依赖树校验规则，因此抛出冲突错误。

可选解决方案 #

方案1：升级react-scripts到v5版本（最推荐，改动最小） #

react-scripts v5默认内置webpack5，不需要修改任何配置即可兼容，操作步骤如下：

• 卸载现有版本react-scripts：
  npm uninstall react-scripts （npm环境）或 yarn remove react-scripts（yarn环境）
• 安装v5版本react-scripts：
  npm install react-scripts@5 或 yarn add react-scripts@5
• 删除项目根目录下的node_modules文件夹、package-lock.json（npm）或yarn.lock（yarn）文件
• 重新执行依赖安装命令：npm install 或 yarn install

方案2：保留react-scripts v4，强制覆盖依赖版本 #

如果因项目兼容性原因无法升级react-scripts，可以通过包管理器的依赖覆盖规则强行指定webpack版本：

• 若使用npm 8.3.0及以上版本，在package.json中新增overrides字段：

  {
    "overrides": {
      "react-scripts": {
        "webpack": "^5.0.0"
      }
    }
  }
  

  配置完成后执行npm install即可生效。
• 若使用yarn，在package.json中新增resolutions字段：

  {
    "resolutions": {
      "webpack": "^5.0.0"
    }
  }
  

  配置完成后执行yarn install即可生效。

注意：该方案强行替换了react-scripts依赖的webpack版本，可能出现内置构建配置与webpack5不兼容的问题，若遇到配置报错可配合react-app-rewired+customize-cra工具自定义修改webpack配置适配。

方案3：eject暴露构建配置自行维护 #

如果需要高度自定义构建规则，可以选择暴露react-scripts的内置配置，操作不可逆：

• 执行npm run eject 命令，确认后会将所有构建配置输出到项目根目录的config文件夹下
• 手动修改package.json中的webpack依赖版本为5.x，同时升级所有相关loader、插件到适配webpack5的版本
• 逐一调整config目录下的webpack配置，替换webpack4已废弃的API，适配webpack5的规则

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