使用Webpack 5在Phaser中加载Spine2D图集时出现404错误

问题背景 #

• Spine2D 图集文件 skeleton.atlas 内硬编码引用了同目录的 skeleton.png
• Webpack 构建时会为图片添加哈希重命名（如 37793a1e525b2946e0eb.png）
• 图集加载原文件名导致404错误，手动替换哈希名可临时解决，但哈希随构建变化无法长期复用
• 加载图集的代码：

this.load.spineAtlas('skeleton-atlas', require('../../assets/character/skeleton.atlas'));

• 依赖版本：webpack@5.98.0，phaser@3.88.2，@esotericsoftware/spine-phaser@4.2.76

解决方案1：使用第三方插件 webpack-atlas-renamer-plugin #

这个插件专门用于处理Spine图集的文件名替换，自动将图集中的图片名替换为Webpack生成的哈希文件名。

1. 安装插件

npm install webpack-atlas-renamer-plugin --save-dev

2. 配置Webpack
   在 webpack.config.js 中添加插件和对应的loader规则：

const AtlasRenamerPlugin = require('webpack-atlas-renamer-plugin');

module.exports = {
  module: {
    rules: [
      // 处理图片资源，生成带哈希的文件名
      {
        test: /\.(png|jpg|jpeg)$/,
        type: 'asset/resource'
      },
      // 以源码形式读取图集文件，供插件修改
      {
        test: /\.atlas$/,
        type: 'asset/source'
      }
    ]
  },
  plugins: [
    new AtlasRenamerPlugin({
      test: /\.atlas$/ // 匹配所有.atlas文件
    })
  ]
};

解决方案2：自定义Webpack插件修改图集内容 #

如果不想依赖第三方插件，可以手动编写插件，通过Webpack的emit钩子修改生成的图集文件内容。

1. 创建自定义插件文件 SpineAtlasRenamePlugin.js

class SpineAtlasRenamePlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('SpineAtlasRenamePlugin', (compilation, callback) => {
      // 遍历所有构建产出的资源
      Object.keys(compilation.assets).forEach(assetName => {
        if (!assetName.endsWith('.atlas')) return;

        // 获取原图集内容
        const originalContent = compilation.assets[assetName].source();
        // 替换图集中的图片名为对应的哈希文件名
        const updatedContent = originalContent.replace(/(\w+\.(png|jpg))/g, (match) => {
          // 查找同目录下匹配的哈希图片文件
          const matchedImage = Object.keys(compilation.assets).find(asset => 
            asset.includes(match.split('.')[0]) && asset.endsWith(`.${match.split('.')[1]}`)
          );
          return matchedImage || match;
        });

        // 更新图集资源内容
        compilation.assets[assetName] = {
          source: () => updatedContent,
          size: () => updatedContent.length
        };
      });
      callback();
    });
  }
}

module.exports = SpineAtlasRenamePlugin;

2. 在Webpack配置中引入插件

const SpineAtlasRenamePlugin = require('./SpineAtlasRenamePlugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg)$/,
        type: 'asset/resource'
      },
      {
        test: /\.atlas$/,
        type: 'asset/resource' // 输出图集文件，供插件修改
      }
    ]
  },
  plugins: [
    new SpineAtlasRenamePlugin()
  ]
};

验证方法 #

构建项目后，查看输出目录中的 .atlas 文件，确认其中的图片文件名已被替换为带哈希的文件名，再启动项目验证是否仍有404错误。

内容的提问来源于stack exchange，提问作者Veme