我有一个使用Service Worker的Web应用程序来预取和缓存所有资产。因此,我需要一个缓存键,该键在您的资产运行时会发生变化,例如与我的资产一起的块的哈希。但是,我很难将哈希值放入Service Worker的模板中。

这是我的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块的哈希?

最佳答案

我建议使用一个Webpack插件来为您处理所有复杂的缓存版本控制,例如WorkboxWebpackPlugin(我正在研究)或offline-plugin

一方面,您将最终能够在更精细的级别上缓存文件,并且仅重新下载实际更改的文件(而不是在main块的哈希值更改时重新下载所有内容)。

关于javascript - 使用webpack获取不同块的哈希(进入Service Worker),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47322288/

10-12 00:50
查看更多