Adding another entry file to webpack w/o being injected to HTML file

I'm using CRA with CRACO to add another entry file to webpack configuration.

Here is the code:

module.exports = {
  webpack: {
    configure: (webpackConfig, {paths}) => {
      return {
        ...webpackConfig,
        entry: {
          main: paths.appIndexJs,
          content: './src/chromeServices/DOMEvaluator.ts',
        },
      }
    },
  },
}

However I don't need this file to be injected into the HTML file, is that possible to do so?

It is very easy to do so. CRACO and ultimately CRA make use of html-webpack-plugin to generate your HTML file and add the required script tags. You will have to make use of chunk filtering to achieve this.

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


module.exports = {
  webpack: {
    configure: (webpackConfig, {paths}) => {

      // 1. Find instance of HTML Webpack plugin
      const pluginInstance = webpackConfig.plugins.find(
        webpackPlugin => webpackPlugin instanceof HtmlWebpackPlugin
      );

      // 2. Define the exclusion or inclusion
      if (pluginInstance) {
        pluginInstance.options.excludeChunks = ['content'];
        
        // Or, alternately, use include only feature
        // pluginInstance.options.chucks = ['main'];
      }

      return {
        ...webpackConfig,
        entry: {
          main: paths.appIndexJs,
          content: './src/chromeServices/DOMEvaluator.ts',
        },
      }
    },
  },
};