如何在Create React App中排除index.html中的指定chunk（Chrome扩展场景）

问题核心是html-webpack-plugin默认会将所有Entry Chunk注入到生成的index.html中，你配置的background和content作为额外入口，被自动加入到了popup对应的index.html里。要解决这个问题，只需修改html-webpack-plugin的配置，限制它只注入main chunk即可。

修改你的config-overrides.js，添加对html-webpack-plugin的自定义配置：

const { override } = require('customize-cra');

const overrideEntry = (config) => {
  config.entry = {
    main: './src/popup', // the extension UI
    background: './src/background',
    content: './src/content',
  };
  return config;
};

const overrideOutput = (config) => {
  config.output = {
    ...config.output,
    filename: 'static/js/[name].js',
    chunkFilename: 'static/js/[name].js',
  };
  return config;
};

const overrideHtmlWebpackPlugin = (config) => {
  // 找到html-webpack-plugin的实例
  const htmlPlugin = config.plugins.find(plugin => plugin.constructor.name === 'HtmlWebpackPlugin');
  if (htmlPlugin) {
    // 只注入main chunk，排除background和content
    htmlPlugin.options.chunks = ['main'];
  }
  return config;
};

module.exports = {
  webpack: (config) => override(overrideEntry, overrideOutput, overrideHtmlWebpackPlugin)(config),
};

关键说明： #

• 通过查找HtmlWebpackPlugin实例，修改其chunks选项为['main']，明确指定只注入popup对应的入口脚本
• 这个修改会保留background.js和content.js的构建产物，但不会将它们插入到index.html中，完全符合Chrome扩展的需求（background和content-script需要在manifest.json中单独配置引用）

内容的提问来源于stack exchange，提问作者Remi_la