Ale*_*lex 1 javascript python browser-cache webpack
对于我的网站，我有一个 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 清单插件。
更新
更改entry您的 webpack 文件：
// 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);
}
}
在配置里面，在modulekey之后，添加如下代码：
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
})
}
]
替换路径名，你就完成了:)
如果您遇到任何错误，请告诉我。
| 归档时间： |
|
| 查看次数： |
1088 次 |
| 最近记录： |