网页在生产中不会刷新，直到硬刷新答案

【问题标题】：Webpage does not refresh in production until hard refresh网页在生产中不会刷新，直到硬刷新
【发布时间】：2017-10-29 15:55:02
【问题描述】：

对于我的网站，我有一个烧瓶服务器提供由 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>

【问题讨论】：

标签： javascript python webpack browser-cache

【解决方案1】：

您需要自己破坏缓存。 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 Manifest Plugin。

更新

在你的 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
    })
  }
]

替换路径名就完成了:)

如果您遇到任何错误，请告诉我。

【讨论】：

嗨，softvar，这是我尝试过的事情之一。不过，我想不出一种将清单插件生成的 JSON 文件读入 index.html 文件的方法，也找不到在线的示例。你知道或有一个例子吗？谢谢。
已使用更新 index.html 文件中的 bundle.js 所需的确切代码更新了代码

【解决方案2】：

这不是关于 webpack 的问题，服务器没有办法强制浏览器不要使用缓存。您可以做的是在您的网址中添加一些后缀，例如将bundle.js 替换为bundle.js<it's md5>。在这种情况下，由于 url 不同，浏览器会将其视为新资源。

【讨论】：