在硬刷新之前，网页不会在生产中刷新

Question

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

Answer 1

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

Answer 2

您需要自己清除缓存。 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>

现在每次构建时，如果有内容发生变化，哈希值都会更新。

NOTE: Don't forget to update the file path in HTML each time you build or customize your build to have a replace task which automatically updates the HTML file. You can use Webpack Manifest Plugin for this.

更新

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

替换路径名就大功告成了:)

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

在硬刷新之前，网页不会在生产中刷新

Webpage does not refresh in production until hard refresh

javascript

python

browser-cache

webpack