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: [email protected], [email protected], @esotericsoftware/[email protected]

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: [email protected], [email protected], @esotericsoftware/[email protected]

• webpack
• phaser-framework
• webpack-5
• spine

• 1 Is your question already solved, or did I miss something. If you found/have a better solution, could you share it, for others with similar issues and so that the question is marked as done. – winner_joiner Commented Mar 28 at 4:19
• Couldn't find any other solution so this workaround works just fine – Veme Commented Mar 28 at 10:31

1 Answer 1

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.