如何在 Webpack 中使用 Cache-Busting？

Question

在使用 Webpack 之前，我总是依赖以下模式来“清除缓存”：

 <script src="foo.js?cacheBust=12345" />

其中 12345 是服务器在每次构建时为我生成的令牌（它可能是 Git 哈希，尽管在我的情况下不是）。

使用 Webpack，我现在有两个文件： build.js 和 chunk.1.js 。因为我把第一个带入了一个普通的脚本标签，所以我可以使用上面的模式：

 <script src="build.js?cacheBust=12345" />

但是，此时 build.js 去获取 chunk.1.js ，当它执行时它不包含缓存破坏后缀。

我希望 Webpack 自动附加 ?cacheBust=12345 ，但我不知道 12345 构建时的部分，所以我不能将它包含在我的 webpack.config 。相反，我必须等到 HTML 页面被评估，此时我从服务器获取令牌。

所以，我的问题是，有没有办法让 Webpack 查看用于获取初始文件的参数（例如 ?cacheBust=12345 ）并在获取其他文件时附加相同的参数？

原文由 machineghost 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以简单地这样做

output: {
    filename: '[name].js?t=' + new Date().getTime(),
    chunkFilename: '[name]-chunk.js?t=' + new Date().getTime(),
    publicPath: './',
    path: path.resolve(__dirname, 'deploymentPackage')
}

原文由 VizardCrawler 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您想以“ webpack 方式”实现缓存破坏：

1.输出文件的哈希名称

将输出文件名更改为散列生成的名称（在构建阶段）

 output: {
    path: '/',
    filename: '[hash].js',
    chunkFilename: '[chunkhash].js',
},

From that point your foo.js and chunk.1.js will be called like e883ce503b831d4dde09.js and f900ab84da3ad9bd39cc.js .值得一提的是，此文件的生成通常与制作和时间太更新 cacheBust 值有关。

2.如何包含未知文件名？

从现在开始，您的 foo.js 主文件以未知方式命名。要提取此文件名，您可以使用 AssetsPlugin

 const AssetsPlugin = require('assets-webpack-plugin');
const assetsPluginInstance = new AssetsPlugin();

并将此插件添加到 webpack.config.js

 plugins: [
    assetsPluginInstance
]

在 webpack-assets.json 文件中你应该看到类似的东西

{
    "main": {
        "js": "/e883ce503b831d4dde09.js"
    }
}

您可以使用此文件指向主 .js 文件。有关详细信息，请阅读 此答案

3.受益时间

我想如果你因为修改了 chunk.2.js 文件而制作了应用程序，你将文件路径从

- build.js?cacheBust=12345
- chunk.1.js?cacheBust=12345
- chunk.2.js?cacheBust=12345
- chunk.2.js?cacheBust=12345

给新的

- build.js?cacheBust=12346   // modified referation to chunk.2.js file
- chunk.1.js?cacheBust=12346
- chunk.2.js?cacheBust=12346 // modified
- chunk.2.js?cacheBust=12346

如果您使用上述解决方案，您将获得 免费缓存确定。现在 filles 将被称为

（以前的制作）

 - e883ce503b831d4dde09.js
- f900ab84da3ad9bd39cc.js
- 5015cc82c7831915903f.js
- 8b6de52a46dd942a63a7.js

（新制作）

 - c56322911935a8c9af13.js // modified referation to chunk.2.js file
- f900ab84da3ad9bd39cc.js
- cd2229826373edd7f3bc.js // modified
- 8b6de52a46dd942a63a7.js

现在 只有 main file 和 chunk.2.js 名称已更改，您将通过使用 webpack 方式免费获得。

您可以在此处阅读有关长期缓存的更多信息 https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31

原文由 Everettss 发布，翻译遵循 CC BY-SA 3.0 许可协议