在 webpack 中缓存 JSON 文件答案

【问题标题】：Cache busting of JSON files in webpack在 webpack 中缓存 JSON 文件
【发布时间】：2017-05-04 08:46:21
【问题描述】：

我有以下代码（用 typescript 编写，但可以是任何 JS 变体）：

this.http.get('configs/config.json').subscribe(...);

基本上，我是从本地 json 文件加载配置。我想在文件上实现缓存清除。虽然我可以通过添加哈希后缀来设置我的 webpack 来修改 json 文件，但我还需要修改所有引用这些文件的源文件。 string-replace-loader 可能会完成这项工作，但这样做感觉有点奇怪。

此外，在某些情况下，我无权访问对资源进行 http 调用的代码行（例如加载 i18n/[lang].json 之类的翻译的第三方插件，因此我无法直接修改代码和/或名称（以及内容哈希）仅在运行时已知。

有没有像 webpack 的 URL 重写这样的东西可以解决这个问题？

【问题讨论】：

如果你注入一个哈希得到configs/config.json?<hash goes here>怎么办？如果散列发生变化，那么它将使查询无效。您可以使用DefinePlugin 等轻松注入。
我会将这个哈希注入到哪里？加载它的 ts 文件（问题在第三段中描述）还是通过在 webpack 中重命名文件来完成（windows 服务器不允许这种命名）？
DefinePlugin 可以这样做，如果你有类似hash = HASH; 并替换HASH.. 然后你可以像往常一样做'configs/config.json' + hash。
成功了，谢谢。我只需要根据实际文件内容找到一种方法来制作这个 HASH。
这是一个更难的问题。如果它只是一个文件，那么您可以使用 Node.js 在文件内容上计算 md5 并将其注入。处理多个将更加棘手。我没有足够的信息来给出确切的解决方案。

标签： angular caching webpack

【解决方案1】：

您可以在 URL 中使用查询参数来避免缓存。无需更改文件名。

this.http.get(`configs/config.json?t=${new Date().getTime()}`).subscribe(...);

new Date().getTime() 将为每毫秒创建一个唯一的数字。

在 ngx-translate 的情况下，您可以将 httpLoader 工厂定义为

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, '/assets/i18n/',`.json?v=${new Date().getTime()}`);
}

希望对你有帮助。

【讨论】：

【解决方案2】：

在 webpack 中，我们通常依赖编译器来构建模块并维护哈希值，因此当模块及其依赖关系发生变化时，块会相应地失效。

如果您对 JSON 文件使用 file-loader 并添加 [hash] 选项以根据其内容添加标识符，您可以更改为以下内容，webpack 将在构建期间处理其余部分：

const configFileUrl = require('configs/config.json')
this.http.get(configFileUrl).subscribe(...)

使用加载器通常是选择加入的最佳方式，因为这会添加模块、启用插件访问并维护依赖项。

【讨论】：