Omitting standalone JS files from index.html

[billdami]

I'm writing a Chrome extension with CRA and using CRACO to create separate .js files in the build for content scripts, service worker/background scripts, etc. I am able to output the files separately using the craco.config.js below, but they still get injected into the index.html as separate <script> tags. Is there any way to disable this?

module.exports = {
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            return {
                ...webpackConfig,
                entry: {
                    main: [
                        env === 'development' && require.resolve('react-dev-utils/webpackHotDevClient'),
                        paths.appIndexJs,
                    ].filter(Boolean),
                    content: './src/chromeServices/domBootstrap.ts',
                    background: './src/chromeServices/serviceWorker.ts',
                },
                output: {
                    ...webpackConfig.output,
                    filename: 'static/js/[name].js',
                },
                optimization: {
                    ...webpackConfig.optimization,
                    runtimeChunk: false,
                },
            };
        },
    },
};

Thanks!

[billdami]

If anyone comes across this, i figured it out. I had to overrided CRA's default HtmlWebpackPlugin config, adding the excludeChunks option:

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            const isEnvDevelopment = env === 'development';
            const isEnvProduction = env === 'production';

            return {
                ...webpackConfig,
                plugins: [
                    new HtmlWebpackPlugin(
                        Object.assign(
                            {},
                            {
                                inject: true,
                                template: paths.appHtml,
                                excludeChunks: ['content', 'background'],
                            },
                            isEnvProduction
                                ? {
                                      minify: {
                                          removeComments: true,
                                          collapseWhitespace: false,
                                          removeRedundantAttributes: true,
                                          useShortDoctype: true,
                                          removeEmptyAttributes: true,
                                          removeStyleLinkTypeAttributes: true,
                                          keepClosingSlash: true,
                                          minifyJS: true,
                                          minifyCSS: true,
                                          minifyURLs: true,
                                      },
                                  }
                                : undefined
                        )
                    ),
                    ...webpackConfig.plugins.slice(1),
                ],
                entry: {
                    main: [
                        isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
                        paths.appIndexJs,
                    ].filter(Boolean),
                    content: './src/chromeServices/domBootstrap.ts',
                    background: './src/chromeServices/serviceWorker.ts',
                },
                output: {
                    ...webpackConfig.output,
                    filename: 'static/js/[name].js',
                },
                optimization: {
                    ...webpackConfig.optimization,
                    runtimeChunk: false,
                },
            };
        },
    },
};