描述Bug

React dev服务器未始终显示webpack配置错误。
cra的默认webpack配置不会导致任何问题。
您可以通过react-app-rewired等工具自定义您的webpack配置来重现此问题。
该问题100%可重现。

是否尝试恢复依赖项？

它发生在最新版本中。

您在《用户指南》中搜索了哪些术语？

这是一个没有显示错误信息的问题，所以我认为它与用户指南无关。
我搜索的词是：

• 仅显示“正在启动开发服务器...”而不执行
• 执行npm启动时挂起编译

环境

create-react-app的当前版本：5.0.0
从/用户/peter.lee/.npm/_npx/c67 e74 de 0542 c87 c/节点模块/创建React应用程序运行
系统：
操作系统：MacOS 12.0.1
CPU：（10）苹果M1 Pro arm 64
二进制文件：
节点：16.14.0 - ~/.nvm/版本/节点/v16.14.0/bin/节点
Yarn：1.22.17/可选/自制/箱装/纱装
npm：8.3.1 - ~/.nvm/版本/节点/v16.14.0/bin/npm
浏览器：
铬：98.0.4758.102
边：未找到
Firefox：未找到
Safari浏览器：15.1
npm程序包：
React：^17.0.2 =〉17.0.2
React域：^17.0.2 =〉17.0.2
React脚本：^5.0.0 =〉5.0.0
npm全局程序包：
创建React应用程序：未找到

重现步骤

1.创建基本CRA项目

• x1m0n1x
• 自定义Webpack配置以构建多个条目和html
• 安装其他软件包
• React应用程序重新连接@2.2.1
• 自定义cra@1.0.0
• 创建单独的条目js和html文件

• 配置config-overrides.js（根路径）

const path = require("path");
const { override } = require("customize-cra");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isEnvProduction = process.env.NODE_ENV === "production";

module.exports = {
  webpack: override(function (config) {
    config.entry = {
      main: path.resolve(__dirname, "src/index.js"),
      second: path.resolve(__dirname, "src/second.js"),
    };

    const htmlWebpackPlugin = config.plugins.find(
      (element) => element.constructor.name === "HtmlWebpackPlugin"
    );

    htmlWebpackPlugin.userOptions.chunks = ["main"];

    config.plugins.push(
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "public/second.html"),
        filename: "second.html",
        chunks: ["second"],
        minify: isEnvProduction,
      })
    );

    return config;
  }),
};

• 修改packages.json中的npm脚本

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

1. $ npm run start个

预期行为

如果运行不正常，控制台上应显示错误。

实际行为

不发生错误，仅显示以下消息，并且无法正常运行

可重现的演示

通过上述的再现步骤，可以容易地再现它。

其他说明（重要）

不运行是正常的。（我写错了代码。）
但是，问题是没有关于为什么没有执行它的提示（错误消息）。
我用下面的方法调试了react-scripts，并找到了项目无法运行的原因。
原因是webpack config.output.filename属性在开发模式下不是多个条目的配置值。
通过另外执行以下步骤来执行调试。
1.在node_modules/react-dev-utils/WebpackDevServerUtils.js的createCompiler函数内设置webpack编译器的failed挂钩，以便在编译失败时显示错误消息。

compiler.hooks.failed.tap('failed', async stats => {
    console.log(chalk.red('Failed to compile.\n'));
    console.log(stats)
});

1. $ npm run start
   1.检查错误消息

1.修改多个块的webpack配置的输出文件名（config-overrides.js）

const path = require("path");
const { override } = require("customize-cra");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const isEnvProduction = process.env.NODE_ENV === "production";

module.exports = {
  webpack: override(function (config) {
    config.entry = {
      main: path.resolve(__dirname, "src/index.js"),
      second: path.resolve(__dirname, "src/second.js"),
    };

    const htmlWebpackPlugin = config.plugins.find(
      (element) => element.constructor.name === "HtmlWebpackPlugin"
    );

    htmlWebpackPlugin.userOptions.chunks = ["main"];

	// !!! Update !!!
    if (!isEnvProduction) {
      config.output.filename = "static/js/[name].bundle.js";
    }

    config.plugins.push(
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, "public/second.html"),
        filename: "second.html",
        chunks: ["second"],
        minify: isEnvProduction,
      })
    );

    return config;
  }),
};

1. $ npm run start
   1.检查控制台中的输出