When I try to load Spine2D's atlas in Phaser, using Webpack 5, I receive 404 for the skeleton.png asset.
// File: skeleton.atlas
skeleton.png
size:2046,1890
filter:Linear,Linear
...
Spine2D's atlas refers to skeleton.png, but Webpack changes file to hash name like 37793a1e525b2946e0eb.png, thus when atlas tries to load skeleton.png it results in 404. Changing skeleton.png to the hash inside skeleton.atlas by hand works fine locally, but it's single-time use as hash changes, but it shows that it is path related issue.
this.load.spineAtlas('skeleton-atlas', require('../../assets/character/skeleton.atlas'));
skeleton.png is always in the same folder as skeleton.atlas so I would probably need only to replace that skeleton.png reference in skeleton.atlas with hash. I tried various hooks in webpack's custom plugin, but with no success. Atlas, as well as PNG, are loaded as resource. I tried source as well, but again with no success.
{
test: /\.(atlas)$/i,
type: 'asset/resource',
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/i,
type: 'asset/resource',
},
Versions: webpack@5.98.0, phaser@3.88.2, @esotericsoftware/spine-phaser@4.2.76
The I personally would put all my spine assets in one folder and ignore, that specific folder for bundle -ing using the Ignore Plugin
new webpack.IgnorePlugin({resourceRegExp, contextRegExp });
the exact patterns depend on your code, since this plugin can be a bit finicky
and then use the Copy Plugin, to move the files yourself.
new CopyPlugin({
patterns: [
{ from: "source", to: "dest" },
],
}),
like this you don't have to worry how to magically generating the new filenames.
There might be a better way, but this is how I would do it.