javascript - dev 文件夹中的 Phaser 3 图像？

Question

我正在关注一个非常基本的 Phaser 3 示例，但问题是 dist 文件夹只包含一个 bundle.js 文件，所有 Assets 仍然从 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 文件和 Assets 文件的游戏？

目前我使用 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 文件中，例如:

从 './src/assets/bmo.png' 导入 img;

如果您对 Webpack 中的设置选项感到困惑，docs 中有大量示例.