javascript - 如何在 Webpack 中使用缓存清除？

Question

在 Webpack 之前，我总是依赖以下模式来进行“缓存清除”:

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

其中 12345 是服务器在每次构建时为我生成的 token (它可能是 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 页面被评估，此时我从服务器获取 token 。

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

Answer 1

如果您想以“webpack方式”实现缓存清除:

1。输出文件的哈希名称

将输出文件名更改为哈希生成的名称(在构建阶段)

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

从那时起，您的 foo.js 和 chunk.1.js 将被称为 e883ce503b831d4dde09.js 和 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 文件。欲了解更多详细信息，请阅读this answer

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