我已经尝试了数周的时间，以使缓存能够与Webpack配合使用，并通过posts，documentation和每个添加的插件的文档进行介绍，但我不知道如何正确处理它。我想使用哈希而不是使用查询参数来进行缓存清除。这是我当前的配置-注释所有带有*的内容意味着仅出于缓存清除目的将其包括在内：
var path = require('path');
var webpack = require('webpack');
var AssetsPlugin = require('assets-webpack-plugin'); // *
var HtmlWebpackPlugin = require('html-webpack-plugin'); // *
var WebpackMd5Hash = require('webpack-md5-hash'); // *
var basePlugins = [
new webpack.DefinePlugin({
__PRODUCTION__: true,
'process.env.NODE_ENV': JSON.stringify('production'),
}),
];
var usedPlugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
}),
new webpack.optimize.CommonsChunkPlugin({ // *
names: "manifest" // *
}), // *
new AssetsPlugin(), // *
new HtmlWebpackPlugin(), // *
new WebpackMd5Hash(), // *
];
/* Config */
module.exports = {
entry: {
main: [path.join(__dirname, '/lib/main')],
},
eslint: {
configFile: 'lib/.eslintrc',
},
resolve: {
root: path.resolve(__dirname, 'lib'),
alias: {
... // a bunch of aliases
},
},
output: {
path: path.join(__dirname, '/pub/'),
filename: '[name].[chunkhash].js', // *
chunkFilename: '[name].[chunkhash].js', // *
sourceMapFilename: '[name].js.map',
publicPath: '/pub/',
},
plugins: usedPlugins,
module: {
preLoaders: [
... // some preloaders
],
loaders: [
... // some loaders
],
},
};
在生产环境中构建此文件时，在
prodBuild/pub文件夹下，我得到3个文件：main.[someHashHereButWithoutTheBrackets].jsmanifest.[someOtherHashHereAndAlsoWithoutTheBrackets].jsindex.html即使在
index.html下有一个pub，该index.html下的prodBuild也会生成，这是提供给客户端的html页面。因此，文件结构如下所示：
/prodBuild
/pub
main.[someHashHereButWithoutTheBrackets].js
manifest.[someOtherHashHereAndAlsoWithoutTheBrackets].js
index.html // call this indexB
/anotherFolder1
...
/anotherFolderK
index.html // call this indexA
同样，在没有任何尝试消除缓存的情况下，
indexA是为客户端提供的服务。其中包含许多脚本标签，例如：<script src="pub/main.js></script> // in indexA
但是，在
indexB中，不仅还有其他缺少的html标签，而且我只得到两个脚本标签：<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Broken Webpack App</title>
</head>
<body>
<script type="text/javascript" src="/pub/manifest.[someOtherHashHereAndAlsoWithoutTheBrackets].js"></script><script type="text/javascript" src="/pub/main.[someHashHereButWithoutTheBrackets].js"></script></body>
</html>
因此，尽管看起来哈希有效（这就是我想要的），但仍然存在几个问题：
哈希未显示在正确的
index.html文件中，即，它显示在indexB中，而不是indexA中。indexB仅包含indexA中的两个脚本。在
indexB中，缺少许多html标记，但在indexA中存在。回顾一下，我需要使用上面介绍的哈希类型来消除缓存。我一点都不精通Webpack，但是我想最终的结果是
indexA完全相同，除了文件名上带有哈希。要使缓存清除正常工作需要做什么？
更新：
我并不是说Thomas所引用的主题标签。正如我在帖子中所描述的，我的意思是哈希值。
最佳答案
我想使用哈希而不是使用查询参数来进行缓存清除。
您不能将哈希用作缓存无效化器。这是因为它们代表了什么。
散列表示同一页面上的不同段落/部分。而查询代表具有动态内容的页面的配置版本。分页或搜索结果之类的...
这就是散列不起作用的原因。对于浏览器，没有明显的理由禁用对哈希的缓存，但是如果将查询的页面缓存，则可能会产生错误的结果。或至少如果缓存将不同的查询视为同一页。
要禁用缓存，您可以使用查询或Cache-Control之类的http标头。
在这里Caching
关于javascript - Webpack-使用具有哈希值的自动版本的缓存清除，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41785582/