如何替换代码中文件引用为Copy Webpack Plugin生成的哈希文件名

云原生阿岚

2026-8-3

替换Webpack构建后资源引用为哈希文件名及JSON图集路径修改问题

我使用CopyWebpackPlugin将所有资源复制到构建目录，该插件已正确生成带哈希的文件，但想找到简便方法替换代码中的文件引用为新的哈希文件名。

当前CopyWebpackPlugin配置

new CopyWebpackPlugin({
  patterns: [
    { from: 'src/assets', to: '[path][name].[contenthash][ext]' },
  ],
}),

现有缓存处理方式

目前我在Phaser中加载资源时使用带时间戳参数的字符串打破缓存，示例如下：

{
   key: 'atlas',
   url: `assets/img/atlas.json?t=${new Date().getTime().toString()}`,
   path: './assets/img/'
},

期望效果

我希望移除缓存破击的查询参数，直接使用带哈希的文件名，让Webpack处理后输出如下：

{
   key: 'atlas',
   url: `assets/img/atlas.{generatedHash}.json`,
   path: './assets/img/'
},

已实现的方案

我已通过webpack-asset-manifest实现了代码中的引用替换，配置如下：

new ManifestPlugin({
  // publicPath: 'assets/',
}),

并编写了从生成的JSON文件中获取URL的函数：

protected getAssetFromKey(key: string | Array<string>): string | Array<string> {
        if (Array.isArray(key)) {
            let urls = new Array<string>();
            key.forEach((urlKey: string) => {
                urls.push(this.assetKeys[urlKey]);
            });
            return urls;
        } else {
            return this.assetKeys[key];
        }
    }