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

Question

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?

Answer 1

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',
        },
      }
    },
  },
};