React+TS开发Chrome扩展V3：Service Worker打包命名问题求助

数据老陈

2026-7-25

解决Chrome扩展Service Worker构建后文件名被混淆的问题

首先得用craco或react-app-rewired覆盖create-react-app的默认webpack配置（直接修改react-scripts源码不现实），这里以craco为例：
1. 安装依赖：npm install @craco/craco --save-dev
2. 在项目根目录新建craco.config.js文件
在craco.config.js里修改webpack的输出规则，针对serviceWorker入口保留原名：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 遍历所有入口，匹配serviceWorker相关的入口名称
      Object.keys(webpackConfig.entry).forEach(entryName => {
        if (entryName.includes('serviceWorker')) {
          // 给该入口单独设置文件名规则，去掉哈希后缀
          webpackConfig.output.filename = (pathData) => {
            return pathData.chunk.name === entryName ? '[name].js' : webpackConfig.output.filename;
          };
          // 如果有代码分割产生的chunk，也需要同步修改规则的话
          webpackConfig.output.chunkFilename = (pathData) => {
            return pathData.chunk.name === entryName ? '[name].js' : webpackConfig.output.chunkFilename;
          };
        }
      });
      return webpackConfig;
    }
  }
};

之前你用'[name]' === 'serviceWorker'判断不成立，是因为[name]是webpack的占位符字符串，不是实际的chunk名称，必须通过pathData.chunk.name获取真实的入口名称来做匹配。
如果你的serviceWorker.ts没被添加为webpack入口，得先在配置里手动添加：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 把serviceWorker.ts设为单独入口
      webpackConfig.entry.serviceWorker = './src/background-scripts/serviceWorker.ts';
      // 设置固定文件名
      webpackConfig.output.filename = (pathData) => {
        return pathData.chunk.name === 'serviceWorker' ? '[name].js' : webpackConfig.output.filename;
      };
      return webpackConfig;
    }
  }
};