Question

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

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

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

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

webpack的URL重写是否可以解决这个问题？

Answer 1

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

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

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

通常使用加载程序是最好的选择，因为这会添加模块，启用插件访问并维护依赖性。

Answer 2

您可以在URL中使用query-params以避免缓存。无需更改文件名。

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

我希望能帮上忙。

在webpack中缓存破坏JSON文件

2 个答案: