如何在React的Webpack配置中添加firebase-messaging-sw.js支持import与tree-shaking

以下方案完全支持ES模块import语法和Tree Shaking能力，适配模块化Firebase Web SDK： #

场景1：自定义Webpack配置 / 已eject的Create React App项目 #

直接修改webpack配置文件即可：

• 新增单独的入口指向你的service worker源文件（建议放在src/目录下，不要放在public/目录）
• 配置输出规则，确保service worker输出的文件名固定，不添加content hash后缀，避免浏览器无法匹配service worker路径

// webpack.config.js 示例
module.exports = {
  // 原有配置保持不变
  entry: {
    main: './src/index.js',
    // 新增service worker入口
    'firebase-messaging-sw': './src/firebase-messaging-sw.js'
  },
  output: {
    // 原有output配置保留，仅修改filename规则
    filename: (pathData) => {
      return pathData.chunk.name === 'firebase-messaging-sw' 
        ? '[name].js' 
        : '[name].[contenthash].js';
    },
    // 其他output配置保持不变
  }
}

配置完成后，你可以直接在src/firebase-messaging-sw.js中用import语法引入模块化Firebase SDK，webpack打包时会自动执行Tree Shaking，剔除未使用的代码。 #

场景2：未eject的Create React App项目 #

无需eject项目，通过工具修改默认webpack配置即可：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 项目根目录新建config-overrides.js文件：

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

module.exports = override(
  // 新增service worker入口
  addWebpackEntry({
    'firebase-messaging-sw': './src/firebase-messaging-sw.js'
  }),
  // 配置输出文件名规则
  (config) => {
    const originalFilenameRule = config.output.filename;
    config.output.filename = (pathData) => {
      return pathData.chunk.name === 'firebase-messaging-sw' 
        ? '[name].js' 
        : originalFilenameRule;
    };
    return config;
  }
);

3. 修改package.json中的启动脚本，将react-scripts替换为react-app-rewired：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

场景3：Next.js项目 #

使用next-pwa插件配置即可，无需手动修改webpack基础配置：

1. 安装依赖：

npm install next-pwa --save-dev

2. 修改next.config.js配置：

const withPWA = require('next-pwa')({
  dest: 'public',
  // 配置自定义worker所在目录
  customWorkerDir: 'src/workers',
  register: true,
  skipWaiting: true
});

module.exports = withPWA({
  // 其他Next.js配置保持不变
});

3. 将你的firebase-messaging-sw.js放在src/workers/目录下，直接使用import语法引入Firebase SDK即可，打包时会自动输出到public/目录，同时支持Tree Shaking。

验证方法 #

执行生产构建后，检查输出目录（CRA为build/，Next.js为out/）下是否存在无hash后缀的firebase-messaging-sw.js文件，打开文件查看是否仅包含你引入的Firebase模块相关代码，确认Tree Shaking生效。

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