对于我的网站，我有一个Flask服务器来提供由webpack生成的文件。 不幸的是，当我更新文件时，由于浏览器缓存的原因，网页通常直到硬刷新（Ctrl-F5）才更新。 我希望网页在定期刷新后进行更新，因为大多数用户都不知道硬刷新。 在开发中，有一些绕过硬刷新的方法，例如webpack-dev-server。 在生产中最简单的方法是什么？
我有以下webpack.config.js文件：
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: ['react-hot-loader/patch', './js/main.js'],
output: {
filename: "./static/bundle.js",
},
resolveLoader: {
moduleExtensions: ['-loader']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loaders: 'babel',
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.css$/,
loader: 'style-loader',
},
{
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
}
]
}
};
Flask服务器正在提供一个如下所示的index.html文件：
<html>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
您需要自己破坏缓存。 Webpack对此有规定。
output: {
filename: "./static/bundle-[hash:6].js",
},
生成的捆绑文件如下所示： bundle-1e3dab.js
现在，在HTML ：
<html>
<body>
<div id="app"></div>
<script src="bundle-1e3dab.js"></script>
</body>
</html>
现在，每次构建时，如果更改了某些内容，则哈希值将被更新。
注意：每次构建或自定义构建以具有自动更新HTML文件的替换任务时，请不要忘记更新HTML中的文件路径。 您可以为此使用Webpack清单插件 。
UPDATE
更改您的webpack文件中的entry ：
// Entry, files to be bundled separately
entry: {
'main': [
'react-hot-loader/patch',
'./js/main.js'
]
},
并用于更新哈希
var fs = require('fs');
var path = require('path');
var basePath = path.join(__dirname, '/');
function replace (statsData, fileName, readFilePath, regex, assetChunkName, writeFilePath, replaceWith) {
// Read the data so that hash can be read
let stats = statsData.toJson();
if (!stats.errors.length) {
// read the file i.e. index.html and store the contents
let contents = fs.readFileSync(path.join(readFilePath, fileName), 'utf8'),
// Replace the pattern with the user-defined replacedWith variable or the chunkHash webpack provides
htmlOutput = contents.replace(
regex,
replaceWith || stats.assetsByChunkName[assetChunkName][0]
);
// Write back the modified contents into the file
fs.writeFileSync(path.join(writeFilePath, fileName), htmlOutput);
}
}
在配置内部，在module密钥之后，添加以下代码：
plugins: [
function() {
// To be executed when build is done
this.plugin('done', (statsData) => {
// `statsData` has the info regarding the file bundling(hash)
// Replace the filename with the update chunkHash for build/prod only
replace(
statsData,
'index.html', // filename which needs to be modified
path.join(basePath, '/dist/'), // path from where to read index.html
/bundle\.js/i, // regex i.e. which needs to be replaced
'bundle',
path.join(basePath, '/dist/')) // path from where to write index.html, can be same if needs ot override
})
}
]
替换路径名，就可以完成:)
让我知道您是否遇到任何错误。
这不是关于webpack的问题，服务器无法强制浏览器不使用缓存。 您可以做的是在URL中添加一些后缀，例如将bundle.js替换为bundle.js<it's md5> 。 在这种情况下，由于URL不同，浏览器会将其视为新资源。