webpack을 사용하여 다른 청크의 해시 가져 오기

Question

서비스 근로자를 사용하여 모든 애셋을 미리 가져오고 캐시하는 웹 앱이 있습니다. 따라서 애셋이있는 덩어리의 해시처럼 애셋이 변경 될 때 캐시 키가 필요합니다. 그러나 나는 Service Worker에 대한 템플릿에 해쉬를 갖기 위해 고심하고있다.

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()] 
}; 

가 어떻게이 main 청크의 해시되는 <hash>해야합니까 : 여기

내 webpack.config.js의 단순화 된 버전입니다?

Answer 1

WorkboxWebpackPlugin (예 : offline-plugin)과 같은 캐시 버전 관리의 모든 복잡한 기능을 처리하는 Webpack 플러그인을 사용하는 것이 좋습니다.

더 세분화 된 수준에서 파일을 캐시 할 수있게되고 실제로 변경된 파일 만 다시 다운로드 할 수있게됩니다. main 청크의 해시가 변경 될 때마다 모든 파일을 다시 다운로드하지 않아도됩니다.