My attempts at making an IO game is failing, as I can't dynamically load images after I have packed the game using WebPack (a hypothesis). When I lazy load any assets whether it be cross origin or local, it doesn't seem to load and render.

in index.js I have this in phaser's 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();

when I use the preload, it does work. But dynamically it does not. I've been searching for nearly a day straight without any luck.

question:

Is my assumption correct? And if it is, what is a way I can dynamically load images after WebPack has packed the files?

CodePudding user response：

I'm no webpack expert (and depending on the webpack version), but if you are not using a webpack.config, the default behavior is that there should be:

• webpack bundle files are placed into the ./dist folder. So to answer your question, any file that is not in this folder is not bundled with webpack

Except if they are "inlined" in the main.js, I think images are not be inlined automatically/without plugin, or atleast in the version I used to use.

• dev-server offers an extra folder, where "static" files can be placed, it is ./public(https://webpack.js.org/configuration/dev-server/)

So all files that are served from the dev-server must be in on of those folders.

I would place the images/assets into that ./public folder, and than they should be visible.

Info: I tripped over this once, files placed in ./public folder are accessed, as if they would be in the ./dist folder.