manifest.json 可以用来重新映射网站资产路径，以便静态资产可以利用内容哈希吗？

Question

我在使用 [contenthash] 静态资产并使用 manifest.json 文件重新映射资产路径时遇到问题。

在我的项目中，使用 Webpack v5 和 React，我在“public”文件夹中有很多图像文件，我在代码中引用了这些文件，例如

<img src="/img/home/desktop/image-hero.jpg" />.

这些图像文件在生产构建期间使用“copy-webpack-plugin”复制到“dist”文件夹。这一切都可以在没有 [contenthash] 的情况下正常工作，并且网站可以正确显示开发（webpack 开发服务器）和生产（使用“http-server”来提供文件）。

我搜索了解决方案，并看到提到使用“webpack-manifest-plugin”或类似的方法来生成一个manifest.json 文件，然后可以在 HTML 中链接该文件。在清单中，它包含键值对、原始资产路径名和您希望映射到的修改后的路径，例如

{ "img/shared/tablet/image.jpg": "img/shared/tablet/image.37743784743ba76b4130.webp" }

我的网站成功获取了manifest.json文件，但是后续对资产文件的请求似乎没有发生任何事情。所有请求都返回 404，并且 GET 请求指向原始路径，而不是带有 [contenthash] 的映射路径。如果我在地址栏中手动请求 contenthash 文件，则该文件可用并加载。

也许我误解了manifest.json的强大功能，但从我的研究来看，这种方法应该可行——资源表明这种方法也可以用于CDN图像。我愿意接受有关如何将 [contenthash] 添加到静态资产的其他建议，同时仍然能够引用上面的绝对路径。

在我的 HTML 模板中，在 head 标签内：

<link rel="manifest" href="assets-manifest.json" />

在我的 webpack.prod.js 的插件部分中：

    new CopyPlugin({
      patterns: [{ from: 'public', to: '[path][name].[contenthash][ext]' }],
    }),
    new WebpackManifestPlugin({
      fileName: 'assets-manifest.json',
      publicPath: '',
      writeToFileEmit: true,
    }),

在 dist 文件夹中的 asset-manifest.json 文件（示例）中：

"img/home/desktop/image-hero.jpg": "img/home/desktop/image-hero.55c18e980adf7658ae26.jpg",

我尝试过在清单文件中使用多种组合，例如将“dist/”添加到一个或两个路径，但没有效果。我的所有图像资产都存在，正确散列，然后在清单值中引用。

根据屏幕渲染和控制台，结果为“http://1.2.3.4:56/img/home/desktop/image-hero.jpg 404 Not Found”。

Answer 1

我希望您找到问题的解决方案。清单文件没有什么神奇的方法可以为您解决这个问题。您通常通过调用一个函数来解决这个问题，该函数在清单文件中进行查找并获取键的值（可能是 app.js 文件，它变成了 app.26263727363.js）