开启Webpack优化后基于React+TypeScript的Chrome扩展程序后台脚本无法加载

看起来你遇到的是Webpack代码分割（splitChunks）和Chrome扩展后台脚本运行环境不兼容的问题，结合你给出的现象和配置，我来拆解下原因和解决方案：

问题根源分析 #

1. Chrome扩展后台脚本的运行特性：后台脚本是独立的隔离环境，它只会加载你在manifest.json中指定的脚本文件，不会像网页那样自动加载Webpack拆分出的vendor.js这类chunk。
2. 开发模式下的splitChunks行为：你的webpack.common.js中配置了splitChunks: { chunks: 'all' }，这会把所有入口（包括后台脚本）中来自node_modules的依赖抽离到vendor.js。但后台脚本运行时无法访问这个vendor.js，导致依赖缺失，进而静默失败（Chrome后台脚本的错误有时候不会直接弹出，需要到扩展管理页的"检查视图"里查看控制台）。
3. 为什么生产模式正常？：生产模式下Webpack会做更激进的代码合并和tree shaking，可能直接把依赖打包进了background.js，没有拆分出独立的vendor chunk，所以后台脚本能正常运行。
4. 移除fetch函数后恢复正常的原因：新增的fetch请求可能引入了额外的依赖（比如polyfill或者相关工具库），触发了splitChunks的拆分逻辑；移除后后台脚本没有外部依赖，即使拆分规则存在，也不会生成额外chunk，所以能正常加载。

解决方案：针对后台脚本禁用代码分割 #

修改webpack.common.js中的optimization.splitChunks配置，把后台脚本排除在vendor拆分之外，确保后台脚本的所有依赖都打包进自身文件中：

optimization: {
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
            vendor: {
                chunks: 'initial',
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                enforce: true,
                // 排除后台脚本，不让它的依赖被抽离到vendor
                exclude: ['background']
            },
            // 额外配置：强制后台脚本不参与任何拆分
            background: {
                test: /background/,
                name: 'background',
                chunks: 'all',
                enforce: true
            }
        },
    },
}

额外验证步骤 #

1. 重新运行开发模式构建，检查dist目录下的background.js体积应该会回到56kb左右（和移除fetch函数时的体积一致）；
2. 加载扩展后，打开后台脚本的控制台（扩展管理页→详情→检查视图→背景页），确认没有依赖缺失的错误；
3. 测试新增的fetch函数功能是否正常。

这个方案既保留了其他入口（popup、options等）的代码分割优化，又保证了后台脚本的独立运行能力，完美适配Chrome扩展的运行环境。

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