webpackでビルドしたjsファイル名にコンテンツハッシュを追加する

ローカルで開発をしていると jsファイルがブラウザでキャッシュされていて「あれ？動かないぞ？」という場面が何度かあった。Webブラウザ上だったら強制更新(Chrome だったら Shift + Ctrl + R) で解決できるんだけど、iPhoneとかのモバイルブラウザだとそういうわけにもいかないので対策が必要だった。

Cache Busting

というわけで、Cache Busting を導入する。Rails のアセットパイプラインにも導入されている方式でこれをwebpackにも導入できるはず。と予想していたが、やはりあった。

Cache Busting とは jsファイルのパス名に適当にクエリ文字列をつけ、別のファイル名として認識させることでキャッシュを別に行うという手法だと認識してる。クエリ文字列をビルド毎に別にしておけばキャッシュも別になるから、いつも最新のファイルが読み込まれるし、プロダクションだとクエリ文字さえ固定であれば同じキャッシュが呼ばれるので、みんな幸せ。

Webpack で Cache Busting

公式のドキュメント には 設定ファイル(webpack.config.js) に以下のように記述すれば解決すると記載されているし、実際その通りにしたらできた。

module.exports = {
  // 一部省略
  output: {
    filename: '[name].[contenthash].js'
  }
};

WebpackのCache Busting はクエリ文字列を付加するのではなくて、ファイル名をビルド毎に違う名前にすることでキャッシュされるのを回避してるようだ。この [contenthash] の部分が実際にはハッシュ文字列に置換されてファイル名を構成する。