Изображения Phaser 3 в папке dev?

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 для тестирования игры.

Answer 1

Попробуйте использовать file-loader для Webpack.

$ npm install file-loader --save-dev

Добавьте загрузчик файлов, настроив конфигурацию вашего веб-пакета следующим образом:

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

Затем вы можете импортировать файл в ваш файл TypeScript, например:

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

Если вы не уверены в настройках Webpack, есть множество примеров в документах .