在使用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），并在获取其他文件时附加同样的参数？
如果您希望以“webpack方式”实现缓存失效:
将输出文件名更改为生成的哈希名称（在构建阶段）
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文件。有关更多详细信息，请阅读此答案。
我猜，如果您由于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
(之前的生产)
。- e883ce503b831d4dde09.js
- f900ab84da3ad9bd39cc.js
- 5015cc82c7831915903f.js
- 8b6de52a46dd942a63a7.js
（新的生产）
- c56322911935a8c9af13.js // modified referation to chunk.2.js file
- f900ab84da3ad9bd39cc.js
- cd2229826373edd7f3bc.js // modified
- 8b6de52a46dd942a63a7.js
现在只有主文件和chunk.2.js的名称被更改了，使用webpack方式可以免费获得这些更改。
您可以在这里阅读更多关于长期缓存的信息。
?cacheBust=12345附加到它导入的文件中？ - machineghostchunk.1.js?cacheBust=12345，如chunk.1.12345.js。 - EverettsscacheBust=12345）需要出现在?之后，以便客户端将其视为URL的一部分（从而破坏缓存），但服务器会忽略它（并且每次只看到实际的文件路径）。 - machineghostfile-loader https://github.com/webpack-contrib/file-loader 作为默认选项，它会将原始文件名转换为哈希值。 - Everettssoutput: {
filename: '[name].js?t=' + new Date().getTime(),
chunkFilename: '[name]-chunk.js?t=' + new Date().getTime(),
publicPath: './',
path: path.resolve(__dirname, 'deploymentPackage')
}
[name]-chunk.js?t=[hash] - 这仍然为您提供可读的文件名，并且应该只有在文件更改时才更改哈希。 - Andreas您可以使用 HtmlWebpackPlugin
webpack.js.org/plugins/html-webpack-plugin的描述如下：
... 插件简化了创建 HTML 文件以服务于您的 webpack bundles。这对于包含在文件名中每次编译都会更改哈希的 webpack bundles 特别有用...
我 webpack.config.js 的一部分：
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');
// ...
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: './assets/index.html',
hash: true,
}),
// ...
]
};
hash: true，则将唯一的 webpack 编译哈希附加到所有包含的脚本和 CSS 文件中。这对于缓存破坏非常有用。
更多关于 HtmlWebpackPlugin 选项 的信息请参见github.com/jantimon/html-webpack-plugin。
感谢这个选项，我得到了输出 HTML 文件。<!DOCTYPE html>
<html>
<head>
<!-- ... rest of my head code ... -->
<link href="./css/styles.css?f42fdf96e2f7f678f9da" rel="stylesheet">
</head>
<body>
<!-- ... rest of my body code ... -->
<script type="text/javascript" src="./js/index.bundle.js?f42fdf96e2f7f678f9da"></script>
</body>
</html>
Laravel，首先安装 webpack-blade-native-loader，它将 Blade 编译为 HTML 并支持在生成的 HTML 文件上运行 HtmlWebpackPlugin（但仅当您的 HTML 不是动态的且不像每个用户一样变化时才有用，通常不是这种情况 :/）。 - Top-Mastermodule.exports = {
// ...
output: {
filename: "[name].bundle.[chunkhash].js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "images/[hash][ext][query]"
},
// ...
optimization: {
moduleIds: "deterministic",
}
// ...
}
使用哈希值是很重要的，比如 [chunkhash]。
注意，有很多不同的方法可以实现。
name.js?cacheBust=1234获取哈希值，可以这样做：output: {
filename: '[name].js',
chunkFilename: '[name].js?cacheBust=[chunkhash]',
},
const componentPromise = import(/* webpackChunkName: "myDelayedSource" */ "path/to/myComponent/myComponent.js");
const componentPromise = import(/* webpackChunkName: "myDelayedSource_2020-05-14" */ "path/to/myComponent/myComponent.js");
foo.png和foo.png?v=1。 - machineghost[chunkhash]的chunkFilename是打破缓存的最佳方法。如果您将这些文件存储在git中，您可以git rm这些文件，进行构建，然后git add。哈希值未更改的文件将被简单地“恢复”，而哈希值已更改的文件将消失。考虑解决方案，而不是机制。 - boatcoder