Webpack中JSON文件的缓存清除

Question

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

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

基本上，我正在从本地json文件加载配置。我希望对该文件实现缓存打破。 虽然我可以设置我的webpack来修改json文件，添加哈希后缀，但我还需要修改所有引用那些文件的源文件。string-replace-loader可能会有所帮助，但这样做感觉有点奇怪。

另外，在某些情况下，我无法访问发起http调用的代码行(例如，加载类似内容的第三方插件)，因此我无法直接修改代码和/或名称（因此内容哈希仅在运行时可知）。

是否有像webpack URL重写之类的东西可以解决这个问题？

- Miroslav Jonas

---

如果您注入一个哈希值，使得您得到 configs/config.json?<hash goes here> ，那会怎样呢？ 如果哈希值发生改变，它将使查询无效。 您可以使用 DefinePlugin 等轻松注入它。 - Juho Vepsäläinen

如果你有类似于 hash = HASH; 的东西并替换了 HASH，那么 DefinePlugin 就可以做到这一点。然后你可以像往常一样执行 'configs/config.json' + hash。 - Juho Vepsäläinen

可以了，谢谢。我只需要找到一种方法，使得此HASH基于实际文件内容。 - Miroslav Jonas

这是一个比较困难的问题。如果只有一个文件，那么你可以使用Node.js计算文件内容的MD5并将其注入进去。处理多个文件会更加棘手。我没有足够的信息来给出确切的解决方案。 - Juho Vepsäläinen

也许可以在CopyWebpackPlugin中执行“transform”传递。我不记得它是否已经允许了，但我想添加它不会很难。虽然在那里进行计算可能太晚了，因此另一个插件可能是关键。 - Juho Vepsäläinen

Answer 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()}`);
}

我希望你能从中受益。

- Kumar Sidharth

---

这个方法可以用来防止缓存，但它会完全阻止对该文件的缓存（每个请求都会从服务器获取文件）。通过 Webpack 可能注入的哈希值，你既可以在文件更改时进行缓存破坏，又可以在文件未更改时进行缓存。 - undefined

Answer 2

在webpack中，我们通常依靠编译器来构建模块并维护哈希值，因此当模块及其依赖项发生更改时，块将相应地无效。

如果您使用file-loader处理JSON文件，并添加[hash]选项以基于其内容添加标识符，则可以更改为以下内容，webpack将在构建过程中处理其余部分：

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

通常使用加载器是最佳选择，因为它可以添加模块，启用插件访问并维护依赖关系。

- Filip Dupanović