Question

我有一个使用Service Worker的Web应用程序来预取和缓存所有资产。因此，我需要一个在资产运行时更改的缓存密钥，例如具有我的资产的块的哈希。但是，我很难将该哈希值放入服务工作者的模板中。

以下是我webpack.config.js的简化版：

const extractSW = new ExtractTextPlugin('serviceworker.js');

module.exports = {
  entry: {
    main: ['./scripts/main.js'],
    serviceworker: ['./templates/serviceworker.js']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'static')
  },
  module: {
    rules: [
      {
        resource: path.resolve(__dirname, 'templates', 'serviceworker.js'),
        loader: extractSW.extract({
          use: [
            {
              loader: 'apply-loader',
              options: {obj: {hash: <hash>}}
            },
            {
              loader: 'underscore-template-loader'
            }
          ] 
        })
      }
    ]
  },
  plugins: [extractSW, new UglifyJSPlugin()]
};

如何使<hash>成为main块的哈希？

Answer 1

我建议使用一个Webpack插件来处理所有复杂的缓存版本控制，例如WorkboxWebpackPlugin（我工作）或offline-plugin。

您最终能够在更细粒度的级别上缓存文件，并且只重新下载实际已更改的文件（而不是在main块的哈希更改时重新下载所有内容）。 / p>

使用webpack获取不同块的哈希值（进入Service Worker）

1 个答案: