angular - 如何使 angular cli 允许我使用名称的内容哈希加载图标

Question

我想缓存我的网站图标，就像我在我的网站上缓存 css/js/png 一样，例如带有一个在未来很长一段时间内过期的 header 。但是我看不到如何做到这一点。我在 favicon 和 angular 上找到的所有文章都建议只使用 html 页面中的链接，将 favicon.ico 放在 Assets 中，然后使用 Assets 构建器选项进行复制。

<link rel="icon" type="image/x-icon" href="favicon.ico">

这不会实现我想要的，因为文件名为“favicon.ico”。我希望它被称为“favicon.[content hash].ico”，因为所有 js、css 和 png 文件都是。

我找到了这篇文章 How to change Angular CLI favicon ，并尝试了其中一条评论中提到的 faviconInitFactory 方法。我认为这是解决此问题的“正确”方法，但它对我不起作用。

如果我只使用这一行，那么 angular 会提示它不知道如何加载 ico 文件

const favicon = require('../assets/favicon.ico');


ERROR in ./src/assets/favicon.ico
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.

作为替代方案，我尝试使用这样的导入

import favicon from '!raw-loader!../assets/favicon.ico';

然后我使用“custom-webpack:browser”和一个 webpack 文件

module.exports = {
  module: {
    rules: [
      {
        test: /\..ico$/,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      }
    ]
  }
}

这让我更进一步，但是当我运行应用程序并加载页面时，当我尝试记录它们时，用这个

console.log(`setting favicon to ${favicon}`);

我得到“setting favicon to”，然后是一些 unicode 符号。我认为这意味着该文件是二进制加载的，而不是内联的 base 64。我知道这是因为文件的内容很小 (6kb)，所以加载器正在内联它们。然而，它们实际上是作为二进制而不是 base64 加载的。

总而言之，我不想提供文件“favicon.ico”，我想提供一个“favicon.[content hash].ico”。文章展示了如何动态引用此文件，但我看不到如何配置 angular cli 的加载程序以加载为 base 64 或 url。

Answer 1

没有人提出答案，我也没有找到。我能想到的最好办法是手动执行该过程，即计算图标的 md5，然后更新页面以查找它。如果图标发生变化，那么我们可以更改名称，它就可以正常工作。

CertUtil -hashfile .\favicon.ico MD5
MD5 hash of .\favicon.ico:
b9aa7c338693424aae99599bec875b5f

然后我们将文件重命名为“favicon.b9aa7c338693424aae99599bec875b5f.ico”，并更新 html 页面以引用它。

<link rel="icon" type="image/x-icon" href="favicon.b9aa7c338693424aae99599bec875b5f.ico">