如何用Firebase Hosting部署Phaser 3游戏？本地加载故障求助

1. 核对Webpack构建路径与Firebase配置 #

Firebase Hosting默认读取public目录下的静态文件，先确认webpack配置的output.path是否指向项目根目录的public文件夹，output.filename是否正确生成到该目录：

• webpack配置片段示例：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  }
};

• 同时检查firebase.json的hosting.public字段是否设为"public"：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

2. 先执行生产构建命令 #

本地yarn dev用的是开发模式，Firebase serve需要读取生产构建后的静态文件。先执行你的webpack生产构建命令：

yarn build

确保public目录下生成了完整的构建产物（包括bundle.js、index.html以及Phaser相关资源）。

3. 修正index.html的脚本引用 #

如果webpack生成的bundle文件名带哈希（比如bundle.[hash].js），手动写死的引用会找不到文件。建议用HtmlWebpackPlugin自动生成index.html，自动注入正确的bundle路径：

• webpack配置示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

构建后public目录会生成正确引用bundle的index.html，避免路径错误。

4. 检查Phaser资源加载路径 #

如果游戏用到图片、音频等资源，确保路径是相对路径，且webpack已正确处理资源：

• 比如用copy-webpack-plugin复制资源目录到public：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/assets', to: 'assets' }
      ]
    })
  ]
};

游戏内加载资源用相对路径：

this.load.image('player', 'assets/player.png');

5. 排查浏览器隐藏报错 #

打开浏览器开发者工具的Console面板，切换到All levels（别只看Errors），再看Network面板里的bundle.js和资源文件是否返回200状态码，404就说明路径配置有问题。

6. 清除Firebase本地缓存 #

Firebase serve可能缓存旧资源，执行以下命令清除缓存后重启服务：

firebase serve --clear-cache

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