[vue-cli] html 컴파일에 캐쉬 기능 (Hash) 넣기

vue cli 에서 파일 이름에 hash 기능을 이용해 캐쉬 제어할 수 있다.

 

방법

방법은 두가지가 있음

1. filenameHashing : cli.vuejs.org/config/#filenamehashing

2. Plugin 에 hash 추가 : github.com/jantimon/html-webpack-plugin#options

 

차이점

이 두가지의 차이점은 

1번은 파일명에 hash 를 넣어서 생성한다는 점

ex) app.css -> app.[hash].css 로 생성

2번은 HTML에 css, js 끝에 hash를 넣어서 생성하기 때문에 파일은 그대로 생성된다는 점

ex) HTML 파일안에

<script src="app.css"> -> <script src="app.css?[hash]">

 

사용법

1번

// vue.config.js
module.exports = {
  filenameHashing: true,
  ...
}

2번을 vue-cli 에 설정하기 위해서는 vue.config.js 에서 chainWebpack 에 옵션을 이용해야함

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].hash = true
      return args
    })
  }
  ...
}
  

 

빌드된 파일을 커밋하여 관리할 경우 2번이 유용함