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

【问题标题】：Get hash of different chunk (into Service Worker) using webpack使用 webpack 获取不同块的哈希（进入 Service Worker）
【发布时间】：2017-11-22 00:35:46
【问题描述】：

我有一个使用 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 块的哈希？

【问题讨论】：

标签： javascript webpack service-worker

【解决方案1】：

我建议使用 Webpack 插件来为您处理所有复杂的缓存版本控制，例如 WorkboxWebpackPlugin（我正在研究）或 offline-plugin。

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

【讨论】：