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提供了它。

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。

<强>更新

更改网络包文件中的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
    })
  }
]

替换路径名，你就完成了：）

如果您遇到任何错误，请与我们联系。

Answer 2

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

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

2 个答案: