如何让 Webpack 使用 Cache-Busting 后缀? [英] How Can I Make Webpack Use a Cache-Busting Suffix?

问题描述

在 Webpack 之前，我总是依赖以下模式来进行缓存破坏":

Before Webpack I would always rely on the following pattern for "cache-busting":

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

其中 12345 是服务器在每次构建时为我生成的令牌(它可能是 Git 哈希，但在我的情况下不是).

where 12345 was a token the sever generated for me on every build (it could be a Git hash, although in my case it isn't).

使用 Webpack 我现在有两个文件:build.js 和 chunk.1.js.由于我使用普通脚本标记引入第一个，因此我可以使用上述模式:

With Webpack I now have two files: build.js and chunk.1.js. Since I bring the first one in with a normal script tag I can use the above pattern:

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

然而，此时 build.js 会去获取 chunk.1.js，并且当它执行时它不包含缓存破坏后缀.

However, at that point build.js goes and fetches chunk.1.js, and when it does it doesn't include the cache-busting suffix.

我希望 Webpack 自动附加 ?cacheBust=12345，但我在构建时不知道 12345 部分，所以我不能包括它在我的 webpack.config 中.相反，我必须等到对 HTML 页面进行评估，然后才能从服务器获取令牌.

I would like for Webpack to automatically append the ?cacheBust=12345, but I don't know the 12345 part at build time, so I can't include it in my webpack.config. Instead, I have to wait until the HTML page is evaluated, at which point I get the token from the server.

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

So, my question is, is there any way to have Webpack look at the parameter used to fetch the initial file (eg. ?cacheBust=12345) and append that same parameter when fetching other files?

推荐答案

你可以简单地这样做

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

这篇关于如何让 Webpack 使用 Cache-Busting 后缀?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！