Webpack issue loading static images about create-phaser-app HOT 3 CLOSED

Hi I'll try to answer these as best I can

1. Quite a lot of value! Firstly, it makes bundling the app much better. if you haven't do a yarn build and go look at the build folder. You'll see the images are basically flattened, renamed and then these imports are resolved to these. This decouples the organization of the dev environment from the build environment. Your app is more transportable. This will be especially helpful when we're targeting mobile devices and doing more complicated output processing. I can also do handy things like make an assets file that resolves the urls, and I can import images our of the assets file. Additional handy things:

• most editors will catch a mistyped import of this nature, as its canonical webpack/import behavior
• You'll be protected at build time from 'bad' imports, as opposed to passing in a string to your code.
• images can be 'preloaded' via web pack for better performance
• Your other suspicion is correct - you have total control over a build pipeline for things like minifying images and so on.

A few more things to note: I'm leaning hard on my level-processor in the config. This actually does a pre-compilation step and templates images.js files for the levels. this means I resolve images out of the tiled JSON and then make references to them. (Then at the build step, they are flattened and prepared for serving.) I'm going to be changing the levels to be a 'biomes' and 'levels' approach in the future, but I haven't had a chance yet. download Tiled and run yarn process-levels if you're curious. The images live in tiled, and are added in Tiled. I think if you play with it would see the process, but I am still working on this and plan to write about it more.

This is interesting! I currently do not have this problem in my own environment, but I've seen similar things before! Are you using windows? I'm guessing yes (I do too). Sometimes Node processes seem to be really aggressive with files, and prevent editing while another process is watching. I've had this problem with editors in the past, like brackets. Lately I've used VS Code and that's helped. I'm guessing you're trying to overwrite a file, like an image file, and the file doesn't allow you to overwrite (bad permissions) because another process (dev server)has the file 'locked'. Is this only image files? Does it affect code too? right now for myself if I 'save over' an image (such as working between pyxeledit and Phaser) It will successfully overwrite, and the hot-reloading will reload the app in the browser.

Maybe this could be a separate issue. If you don't mind, open one up and post as much about your environment as you can. Also see if this does the same thing with other hot-reloading stuff, like create-react-app. I've observed @vantreeseba use the project in Linux, and in a Docker container, and I've used it in OSX (my laptop) and in Windows 10 64 bit (my desktop).

I guess also, what are you using to start the app? Powershell, a tool like Conemu/Cygwin? The native Linux stuff in Windows they recently added? maybe some of this might help zero in on that.

I'll close this issue, and leave it up to you to open that as a separate issue and maybe you can help me repro it

from create-phaser-app.

Thank you for your patience, really useful stuff. Yes I'm running the WSL stuff on Windows 10 and using TexturePacker to try and rewrite an atlas png. Will have a proper poke about tomorrow, try some other environments and create a new issue with more info.

Really appreciate the thorough explanation, I find I can get about 50% of the info from the webpack docs but mainly it's mechanics such as parameters and config options, they always leave out context and "why" various features are available and what problems they're actually solving.

from create-phaser-app.

glad to help, and I totally agree on those docs.

from create-phaser-app.