JS、WebPack、不使用Phaser3动态加载图像超越IO游戏的预加载功能答案

【问题标题】：JS, WebPack, Not Dynamically Loading Images Using Phaser3 Beyond Preload Function For IO GameJS、WebPack、不使用Phaser3动态加载图像超越IO游戏的预加载功能
【发布时间】：2022-01-09 16:03:45
【问题描述】：

我制作 IO 游戏的尝试失败了，因为我在使用 WebPack 打包游戏后无法动态加载图像（假设）。当我延迟加载任何资产时，无论是跨源还是本地，它似乎都没有加载和渲染。

在 index.js 中，我在移相器的 create() 中有这个：

 this.load.image('arc_red', 'https://art.pixilart.com/187aec08b8014f7.gif');//testing with this   
    this.load.once('complete', ()=>{console.log('image loaded!')}, this);       
    this.load.start();

当我使用预加载时，它确实有效。但动态它不会。我一直在寻找将近一天，但没有任何运气。

问题：

我的假设正确吗？如果是的话，有什么方法可以在 WebPack 打包文件后动态加载图像？

【问题讨论】：

我有两个问题：您正在运行什么网络服务器（webpack 的开发服务器或其他服务器）？你能分享你的webpack.config.js 吗？
开发服务器和我构建文件时都不起作用。我没有 webpack.config.js

标签： javascript webpack networking game-engine phaser-framework

【解决方案1】：

我不是 webpack 专家（取决于 webpack 版本），但如果你没有使用 webpack.config，默认行为应该是：

webpack 捆绑包文件放置在 ./dist 文件夹中。 所以回答你的问题，任何不在此文件夹中的文件都不会与 webpack 捆绑

除非它们在main.js 中“内联”，否则我认为图像不会自动内联/没有插件，或者至少在我以前使用的版本中。

dev-server 提供了一个额外的文件夹，可以放置“静态”文件，它是./public(https://webpack.js.org/configuration/dev-server/)

因此，从开发服务器提供的所有文件都必须位于这些文件夹中。

我会将图像/资产放入 ./public 文件夹中，然后它们应该是可见的。

信息：有一次我绊倒了，放在./public文件夹中的文件被访问了，就好像它们在./dist文件夹中一样。

【讨论】：

感谢您的回答。虽然我不知道我不明白 main.js 中的内联文件是什么意思。如果这是我可以动态加载图像的一种方式，您能告诉我更多相关信息吗？
@IAmNoob 简短的回答是，如果您在与dist 相同的级别上创建名为public 的文件夹并将图像添加到此文件夹中，则可以动态加载图像。或者你可以让 webpack 将所有文件压缩成一个 main.js。后者更复杂（或者至少是 webpack 4.x 版），我从未使用过 webpack 5+ 这里是指向非常好的文档的链接webpack.js.org/guides/asset-modules。我希望这对升技有所帮助，或者其他人可以提供更多建议。