如何使用Firebase Hosting托管Webpack项目并确保功能正常？

你不需要手动复制dist文件到public，也没必要把src放进public，按下面步骤来就能解决问题：

1. 修改Firebase配置文件 #

找到项目根目录的firebase.json，把hosting下的public字段改成"dist"，让Firebase直接部署Webpack的打包产物目录。修改后的配置示例：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

（注：rewrites部分是单页应用必备，确保路由跳转正常，你的类社交媒体应用大概率需要这个）

2. 检查Webpack打包配置 #

确保Webpack的输出路径是dist，且资源引用用相对路径：

• 在webpack.config.js里，output配置要包含：

const path = require('path');

module.exports = {
  // ...其他配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: './' // 关键：用相对路径，避免部署后资源找不到
  }
};

• 同时确保HTML模板（比如用html-webpack-plugin）生成的文件里，引用的bundle路径是相对路径，html-webpack-plugin会自动根据publicPath处理，不用手动修改。

3. 重新打包+部署 #

• 先执行本地打包命令（一般是npm run build，具体看你package.json里的脚本配置），生成最新的dist目录内容。
• 然后运行firebase deploy，Firebase会自动把dist里的所有文件部署到Hosting。

为什么之前的方法失效？ #

Webpack打包后，src目录里的源码已经被合并、压缩到dist的bundle文件里了，部署时根本不需要src目录。你之前把dist文件复制到public后功能失效，大概率是因为HTML里还在引用src里的文件，或者资源路径用了绝对路径，导致部署后找不到对应文件。

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