Repository: create-react-app
Issue: How to create more one entry entity point?
Labels: needs triage

# Explanation of why I need to split entry points

I am creating an extension for chrome.
The extension has 3 entry points: 
1. background
2. popup
3. content

The first thing I needed to do was `yarn eject` to access the webpack settings.
After that I configured 3 entry points:
```js
//...
const entryDevelopment = isEnvDevelopment && !shouldUseReactRefresh ? [webpackDevClientEntry] : [];
//...
module.exports = {
    //...
    entry: {
        main: [...entryDevelopment, paths.appIndexJsPopup], // src/index.js
        content: [...entryDevelopment, paths.appIndexJsContent], // src/content.js
        background: [...entryDevelopment, paths.appIndexJsBackground], // src/background.js
    },
    //...
}
```

Chrome extension allows you to specify popup and background html files for entry points, so I did it:
```js
// ...
const htmlWebpackPluginSettings = isEnvProduction
    ? {
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        },
    }
    : undefined
;
// ...
module.exports = {
    // ...
    plugins: [
        // Generates an `index.html` file with the <script> injected.
        new HtmlWebpackPlugin(
            Object.assign(
                {},
                {
                    inject: true,
                    scriptLoading: "defer",
                    template: paths.appHtmlPopup, // public/index.html
                    chunks: ['main'],
                    filename: 'index.html',
                },
                htmlWebpackPluginSettings
            )
        ),
        new HtmlWebpackPlugin(
            Object.assign(
                {},
                {
                    inject: true,
                    scriptLoading: "defer",
                    template: paths.appHtmlBackground, // public/background.js
                    chunks: ['background'],
                    filename: 'background.html',
                },
                htmlWebpackPluginSettings
            )
        ),
        // ...
    ],
    // ...
};
```

The webpack, as it should have, injected all the necessary dependencies into the index.html and background.html files. But I had to specify the `INLINE_RUNTIME_CHUNK=FALSE` line in the ".env" file because chrome does not allow inline styles in extensions.

After `yarn build`, I got files like this (build/background.html):
```html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Extension background</title></head>
    <body>
        <script defer="defer" src="/static/js/runtime-background.dabe1607.js"></script>
        <script defer="defer" src="/static/js/0.c309ccf4.chunk.js"></script>
        <script defer="defer" src="/static/js/background.1d979784.chunk.js"></script>
    </body>
</html>
```

# Main problem

There is only one entry point left, this is `content`.
The manifest file for the chrome extension allows you to specify only js and css files that will be added to all pages.
I specify the entry point content.js as the js file.

To do this, I transferred this file from the static folder:
```js
// ...
module.exports = {
    // ...
    output: {
        // ...
        // There will be one main bundle, and one file per asynchronous chunk.
        // In development, it does not produce real files.
        filename: (path) => {

            if (['runtime-content'].indexOf(path.chunk.name) !== -1) {
                return 'content.js';
            }

            return isEnvProduction
                ? 'static/js/[name].[contenthash:8].js'
                : isEnvDevelopment && 'static/js/bundle.js'
                ;
        },
        // ...
    }
    // ...
};
```

Now I have a content.js file in the build folder. I also specify it in the extension manifest.
This naturally does not work, since other scripts are also needed to work, such as in the backgrand.html:
```html
        <script defer="defer" src="/static/js/runtime-background.dabe1607.js"></script><!-- <<<< this -->
        <script defer="defer" src="/static/js/0.c309ccf4.chunk.js"></script><!-- <<<< and this -->
        <script defer="defer" src="/static/js/background.1d979784.chunk.js"></script>
```

How can I solve my problem and force the webpack to collect all dependencies into a content.js file?