为 ejected Create React App 配置Webpack多入口点（Chrome扩展开发）

我太懂这个坑了——当你把CRA eject之后，默认的webpack配置是单入口模式，根本没法直接生成popup和background两个独立的bundle文件。下面是一步步的配置调整方案，亲测能搞定这个问题：

1. 修改Webpack入口配置 #

首先得把单入口改成多入口，同时还要在路径配置文件里添加对应的别名：

步骤1.1 配置paths.js #

打开config/paths.js，在文件末尾新增两个路径配置：

// 指向你的popup入口文件（比如src/popup.jsx或src/popup/index.js）
appPopupJs: resolveModule(resolveApp, 'src/popup'),
// 指向你的background脚本入口（比如src/background.js）
appBackgroundJs: resolveModule(resolveApp, 'src/background'),

步骤1.2 更新webpack入口 #

回到webpack.config.js，把原来的entry字段替换成多入口对象：

entry: {
  popup: paths.appPopupJs,
  background: paths.appBackgroundJs,
},

2. 调整Webpack输出配置 #

默认的输出文件名是固定的bundle.js，我们要让它根据入口名称生成不同的文件：

找到output字段里的filename和chunkFilename，修改为：

filename: isEnvProduction
  ? 'static/js/[name].[contenthash:8].js'
  : isEnvDevelopment && 'static/js/[name].bundle.js',
chunkFilename: isEnvProduction
  ? 'static/js/[name].[contenthash:8].chunk.js'
  : isEnvDevelopment && 'static/js/[name].chunk.js',

这里的[name]会自动替换成我们在entry里定义的popup和background，构建后就能得到两个独立的JS文件了。

3. 限制HtmlWebpackPlugin只处理Popup页面 #

Background脚本不需要HTML文件，必须确保HtmlWebpackPlugin只注入Popup的JS：

找到plugins数组里的HtmlWebpackPlugin配置，添加chunks: ['popup']字段：

new HtmlWebpackPlugin(
  Object.assign(
    {},
    {
      inject: true,
      chunks: ['popup'], // 关键：只加载popup的JS bundle
      template: paths.appHtml,
    },
    isEnvProduction
      ? {
          minify: {
            removeComments: true,
            collapseWhitespace: true,
            // 其他压缩配置保持不变即可
          },
        }
      : undefined
  )
),

4. 更新Chrome扩展Manifest文件 #

最后把构建后的文件路径正确配置到manifest.json里，注意区分开发和生产环境：

开发环境示例（Manifest V3） #

{
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html"
  },
  "background": {
    "service_worker": "static/js/background.bundle.js"
  }
}

生产环境示例 #

{
  "manifest_version": 3,
  "action": {
    "default_popup": "index.html"
  },
  "background": {
    "service_worker": "static/js/background.[contenthash:8].js"
  }
}

提示：如果觉得生产环境的hash后缀麻烦，可以在webpack配置里去掉contenthash，但不建议这么做——hash能帮助浏览器缓存更新后的文件，提升用户体验。

5. 测试构建 #

运行npm run build，然后检查build/static/js目录，应该能看到popup和background开头的JS文件，同时index.html里只会引入popup的JS。之后就可以把build目录加载为Chrome扩展测试了。

额外注意事项 #

• 如果你的Background脚本是纯JS（不需要React），不用额外调整babel配置，CRA的默认配置能兼容普通JS。
• 如果用TypeScript，记得把入口文件改成.ts或.tsx，同时确保paths.js里的路径正确指向这些文件。
• Manifest V3的Background是Service Worker，脚本里不能使用DOM API（比如document、window），这类逻辑要放到Popup或Content Script里。

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