如何在 Angular 中获取文件哈希名称？答案

【问题标题】：How to get file hash name in Angular?如何在 Angular 中获取文件哈希名称？
【发布时间】：2020-04-03 21:18:36
【问题描述】：

在Angular 4 中，我使用了Webpack（甚至File-loader）的require 方法来获取图像哈希名称：

const versionedName = require('assets/images/icn-copy.svg');

它返回类似“assets/images/icn-copy.435435fj5435f345345f435f435f345f.svg”的东西——散列文件名。我可以用它来请求服务器。但是在迁移到Angular 6 之后，require 函数开始返回具有属性“default”的对象，该对象包含not散列名称。

如何在Angular 6 及更高版本中获取哈希名称？

更新： 我注意到迁移后的图像现在根本没有散列。这可能是原因。例如

.loader {
    background-image: url('assets/images/spinner.svg');
...
}

导致在根目录中只是 spinner.svg 而不是 spinner.214312fe21fe412f4ef.svg

更新 2：由于现在问题已解决，但我很高兴听到更好的方法来绕过图像缓存。 require() 绝对是不是最好的方法。这与资产中的图像无关。这是关于请求的。例如：

this.http.get('assets/images/spinner.svg') // will be cached
this.http.get('assets/images/spinner.214312fe21fe412f4ef.svg') // will NOT be cached.

【问题讨论】：

这不是您使用资产文件夹的目的。这些文件不是 WebPack 包的一部分，您只是强制 WebPack 包含它们。资产文件夹用于存放您希望从 Web 服务器作为静态文件访问的文件。
@Reactgular 我根本不将它们包含在资产文件夹中。我只需要唯一的名称来防止在获取图标时缓存。它在 Angular 4/5 中运行良好
@Reactgular 你还有其他想法吗？请分享。而且我仍然没有完全理解文件加载器的 require()。 CommonJS 完全是另一个要求，因为它返回散列文件名，但不是整个文件。如果你认为这是一个坏主意，那么这个 require() 有什么用？

标签： javascript angular typescript webpack webpack-file-loader

【解决方案1】：

问题是从Angular 6 开始，默认情况下禁用散列。添加标志--output-hashing=all 解决了这个问题。值得一提的是，现在在Typescript 2.7 允许默认导入 CommonJS/AMD/UMD (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#support-for-import-d-from-cjs-from-commonjs-modules-with---esmoduleinterop)。这意味着require() 现在返回的不是带有完整文件名的字符串，而是object，其属性默认值包含此string。而不是

icn-copy.435435fj5435f345345f435f435f345f.svg

现在：

{
    default: "icn-copy.435435fj5435f345345f435f435f345f.svg"
}

但我仍然需要更好的解决方案！（看更新2）

【讨论】：