웹팩(Webpack) 캐시 제어

웹팩(Webpack) 컴파일로 생성 된 파일에서 변경된 내용이 없다면 브라우저는 캐시 상태를 유지하고 그대로 사용하게된다. 브라우저 캐시의 변경된 내용을 어떻게 확인 하는 것일까.

브라우저가 변경 사항을 확인하는 방법중 하나는 파일 이름에서 찾아 볼수 있다.

개발자도구 > 네트워크 목록

search.svg 파일을 추가 하였는데 파일 이름과 확장자 사이에 문자와 숫자로 조합된 해시(Hash) 값이 추가된 것을 볼 수 있다. 620d751b 로 추가된 해시 값은 웹팩 설정에 따라 빌드 될 때 포함된다. search.svg 파일이 이름은 동일하지만 내용이 변경 되었다면 해시 값이 달라진다. 304 상태(Status) 값은 캐시 된 내용과 동일할 때 출력 되며 캐시 된 내용을 그래도 사용 하게 된다.

설정 방법

// webpack.config.js
{
  output: {
    ...
    filename: '[name].[hash].js',
// or
    filename: '[name].[chunkhash].js',
    
    // or
filename: '[name].[contenthash].js',
    ...
  }
}

hash 전, 후 비교

• [hash] : 파일에 공통의 해쉬 값 부여

// before
0.main.2cf758ada72f306.css
0.main.2cf758ada72f306.js
main.2cf758ada72f306.css
main.2cf758ada72f306.js
// after
0.main.d57s58ada72f3d8.css
0.main.d57s58ada72f3d8.js
main.d57s58ada72f3d8.css
main.d57s58ada72f3d8.js

• [chunkhash] : 파일마다 다른 해쉬 값 부여

// before
0.main.2cf758ada72f306.css
0.main.2cf758ada72f306.js
main.d8d78s90e8d7f5.css
main.d8d78s90e8d7f5.js
// after
0.main.d7d8s7f6e90d9cf.css
0.main.d7d8s7f6e90d9cf.js
main.e9d7cjks8gsy27s.css
main.e9d7cjks8gsy27s.js

• [contenthash] : 변경된 파일에만 이전과 다른 해쉬 값 부여

// before
0.main.j2k23j543if7xa9.css
0.main.sd87fd897v89s9d.js
main.d9e8f7d6a5ckwh4.css
main.s2j7id9f8e6q7d6.js
// after
0.main.j2k23j543if7xa9.css
0.main.sd87fd897v89s9d.js
main.d9e8f7d6a5ckwh4.css
main.dke09df8s7ef2ki.js // 변경된 파일

webpack caching