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 to the HTML file, is that possible to do?

CodePudding user response：

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