webpackを使用して異なるチャンクのハッシュを取得する（サービスワーカーに）

Question

サービスワーカーを使用してすべてのアセットをプリフェッチおよびキャッシュする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チャンクのハッシュされて作るのですか？

Answer 1

WorkboxWebpackPlugin（私が取り組んでいる）やoffline-pluginのような、キャッシュのバージョン管理の複雑さを扱うWebpackプラグインを使用することをお勧めします。

より細かいレベルでファイルをキャッシュできるようになり、実際に変更されたファイルのみを再ダウンロードすることになります（mainチャンクの変更時にすべてをダウンロードするのではなく）。