Phaser 3开发：如何打包包含HTML与资源文件的完整游戏项目？

看起来你是刚上手用Webpack打包Phaser项目，遇到的问题其实很常见——Webpack默认只会处理JS/TS模块，不会自动帮你复制资源文件或生成HTML，而且你当前的资源路径是指向开发时的src目录，打包后自然找不到。我来一步步帮你搞定：

1. 让Webpack处理图片资源（Webpack 5+ 推荐方案） #

Webpack 5内置了Asset Modules，不用额外装loader就能处理静态资源。修改你的webpack.config.js，添加资源处理规则：

module.exports = {
  // 保留你已有的entry、output、TS loader等配置
  module: {
    rules: [
      // ...你的TypeScript loader配置（比如ts-loader）
      {
        // 匹配图片文件后缀
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        type: 'asset/resource',
        generator: {
          // 指定打包后资源的输出路径和文件名
          filename: 'assets/[name][ext]'
        }
      }
    ]
  }
};

这样Webpack会自动把你引用的图片复制到dist/assets目录下。

2. 生成HTML文件并自动引入bundle #

你需要用到html-webpack-plugin来帮你生成dist目录下的HTML文件，同时自动把打包好的bundle.js注入进去：

• 先安装插件：

npm install html-webpack-plugin --save-dev

• 然后修改webpack.config.js添加插件配置：

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

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      // 指定你的HTML模板文件路径（需要在src下新建这个文件）
      template: './src/index.html',
      // 打包后输出到dist的HTML文件名
      filename: 'index.html'
    })
  ]
};

接下来在src目录下创建index.html模板，内容大概是这样：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>我的Phaser游戏</title>
  <style>
    body { margin: 0; }
  </style>
</head>
<body>
  <div id="game-container"></div>
</body>
</html>

3. 修正资源加载路径 #

现在资源会被打包到dist/assets，而生成的index.html在dist根目录，所以你需要把预加载的路径改成相对HTML的路径：

export class GameScene extends Phaser.Scene {
  constructor() {
    super({key: "GameScene"});
  }
  preload(): void {
    // 去掉./src/前缀，直接指向assets目录
    this.load.image('bmo', 'assets/bmo.png');
  }
}

4. 配置生产打包命令 #

最后在package.json里添加生产环境的打包命令：

"scripts": {
  "dev": "webpack serve --mode development",
  "build": "webpack --mode production"
}

现在运行npm run build，你的dist目录就会包含：

• index.html
• bundle.js
• assets/bmo.png

之后不管是本地打开dist/index.html还是部署到服务器，资源都能正确加载了。

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