开发文件夹中的 Phaser 3 图像？

Question

我正在关注一个非常基本的 Phaser 3 示例，但问题是 dist 文件夹仅包含一个 bundle.js 文件，所有资产仍从 src 文件夹加载。

文件夹结构：

dist
  - bundle.js
src
  assets
    - bmo.png
  scenes
    - game-scene.ts

加载代码：

  export class GameScene extends Phaser.Scene {

  constructor() {
    super({key: "GameScene"});
  }

  preload(): void {
    this.load.image('bmo', './src/assets/bmo.png');
  }
}

但是现在图像是从src 文件夹加载的！这不对吧？ 如何导出包含 html 文件和资产文件的游戏？

目前我使用npm run dev 运行 webpack 来测试游戏。

Answer 1

尝试在 Webpack 中使用 file-loader。

$ npm install file-loader --save-dev

添加文件加载器来设置你的 webpack 配置，例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
};

然后，您可以在 TypeScript 文件中导入该文件，例如：

import img from './src/assets/bmo.png';

如果您对 Webpack 中的设置选项感到困惑，docs 中有很多示例。