Repository: create-react-app
Issue: Dev Server does not always show webpack config compilation errors
Labels: needs triage,issue: bug report

### Describe the bug
React dev server not consistently showing webpack configuration errors.
cra's default webpack config doesn't cause any problems.
You can reproduce this problem by customizing your webpack config via tools like react-app-rewired.

This issue is 100% reproducible.


### Did you try recovering your dependencies?
It happens in the latest version.


### Which terms did you search for in User Guide?
This is a problem that does not show an error message, so I think it has nothing to do with the user guide.

The words I searched for are:
- show only 'Starting the development server...' and not execute
- pending compile when execute npm start


### Environment
current version of create-react-app: 5.0.0
  running from /Users/peter.lee/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 98.0.4758.102
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.1
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: ^5.0.0 => 5.0.0
  npmGlobalPackages:
    create-react-app: Not Found

### Steps to reproduce
1. Create a basic CRA project
  - `$ npx create-react-app test-app`
2. Customize webpack config to build multiple entries and html
   - install other packages
     - react-app-rewired@2.2.1
     - customize-cra@1.0.0
   - Create separate entry js and html files
     - ![second entry](https://user-images.githubusercontent.com/4979560/155355652-3b9da84f-0c9e-45d2-8e97-b6982fdc90bf.jpg)
   - Configure config-overrides.js (root path)
```
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;
  }),
};
```
   - Modify npm script in packages.json
```
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },
```
3. `$ npm run start`


### Expected behavior
If it does not run normally, **an error should be displayed on the console.**

### Actual behavior
No error occurs, only the following message is exposed and does not run normally
![image](https://user-images.githubusercontent.com/4979560/155356607-353b17b4-9024-42a4-80b4-c5a5a1f8609f.png)

### Reproducible demo
It can be easily reproduced with the reproduction steps described above.

### additional clarification (Important)
Not running is normal. (I wrote the code wrong.)
However, the problem is that there is no hint (error message) as to why it was not executed.

I debugged react-scripts in the following way and found the cause of the project not running.

The cause is that the webpack config.output.filename property was not a value for configuration for multiple entries when in development mode.

Debugging was performed by additionally performing the following steps.

1. Set the failed hook of webpack compiler inside the `createCompiler` function of `node_modules/react-dev-utils/WebpackDevServerUtils.js` to expose an error message when compilation fails.
```
compiler.hooks.failed.tap('failed', async stats => {
    console.log(chalk.red('Failed to compile.\n'));
    console.log(stats)
});
```
2. `$ npm run start`
3. Check the error message
  - ![image](https://user-images.githubusercontent.com/4979560/155359690-e0b499b9-7443-4427-88ad-ccc8a1d91115.png)
4. Modify output.filename of webpack config for multiple chunks (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;
  }),
};
```
5. `$ npm run start`
6. Check output in console
  - ![image](https://user-images.githubusercontent.com/4979560/155360039-2d843586-c68b-45e9-a01e-2b158e5fd936.png)