hash vs chunkhash vs contenthash

hash vs chunkhash vs contenthash

hash 사용

static 컨텐츠 캐싱을 피하기 위함

• 요즘엔 webpack에서 build 시 쉽게 hash를 사용할 수 있음

output: { path: path.join(__dirname, 'build'), filename: '[name].[hash].js', },

hash 종류

전부 내용 변경 없으면 동일한 hash

• hash : build 시 마다 변경, 각 chunk도 같은 hash 값을 가짐

hash 내용 변경 전

hash 내용 변경 후

• chunkhash : webpack entry를 기반으로 정의되어 고유의 hash 값을 가짐 (변경이 일어난 entry의 hash만 변경)

chunkhash 내용 변경 전

chunkhash 내용 변경 후

• contenthash : 추출된 content에 의해 계산되는 hash 값을 가짐 (변경이 일어난 file의 hash만 변경)

contenthash 내용 변경 전

 

contenthash 내용 변경 후

 

hash slice

[hash:8] 처럼 원하는 length만큼 slice 가능
ex) 8c4cbfdb91ff93f3f3c5 -> 8c4cbfdb

https://medium.com/@sahilkkrazy/hash-vs-chunkhash-vs-contenthash-e94d38a32208