Webpackで自動生成されるハッシュ値付きのファイルを強制的に再作成したい

Question

質問内容

Webpackを用いてdistフォルダ配下に作成される、各種js/cssファイルがあります。
それらのファイルにはハッシュ値が付いており、
chunk-XXXXXXXX.XXXXXXXX.js
や
chunk-XXXXXXXX.XXXXXXXX.css
等のファイル名となっています。

今回、とある都合でこれらのファイル名を一新したいと考えていますが、ビルドを実行してもこれらのファイル名が更新されません。

# vue-cli-service build

上記のようにビルドをしていますが、これでdistフォルダの下も全て更新されると考えていたのですが、実際にはファイルの更新日付は変わるものの、ファイル名(ハッシュ値)は変更されませんでした。
src/App.vueにtouchするなどで、何度かビルドを実行してみたのですが、Webpack自体は動いているものの、ファイル名は更新されませんでした。

これらのファイルはWebpackの中で自動的に生成されるという認識で、Webpackについて色々と調べているのですが解答にたどり着けませんでした。そもそもの前提(ハッシュ値はWebpackが付けている)が間違っているような気もしています…。
前任者から引き継いだものの、この辺りの知識に疎くどうすればファイル名が更新されるのかがわかりません。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• dist配下に作成されるファイル名を更新したい
• ハッシュ値を新たに取得し直した名前にしたい(ハッシュ値を外したいわけでは無い)
• 元になっているVue等のソースは(できれば)更新したくない

試したこと

• リビルド
• distフォルダを削除(mvでリネーム)

テスト環境はdocker上に作られており、そちらでは

docker build XXX --no-chache=true

としてビルドした所、うまくファイルが置き換わったので、同等の事が本番環境でも実施できればと考えています。

Comments

[San]

maisumakunさんのコメントから、確認の為にDocker環境でのリビルド(ソース等の変更は無しで、--no-cache=trueのみを指定)してみました。
「chunk-XXXXXXXX.YYYYYYYY.js」
というファイル名だったのが
「chunk-XXXXXXXX.ZZZZZZZZ.js」
に書き換わりました。
前半部分は全てのファイルで完全に一致しており、恐らく助言通り元ファイル(ソース)に沿って作成されたハッシュ値であるために変わらなかったと考えられます。
一方で、後半部分は全てのファイルが書き換わった事を確認したので、参照している(ソースとは別の)何かが影響しているように思われます。

本来はmaisumakunさんの提案のように、バージョンなどを含めたファイル名にしたり、ビルド時にタイムスタンプを用いるなどでWebpackが生成するファイル名を変更するなどが望ましいと思われるのですが、既に運用されているサービスであるため、直近で大きく変更するのは難しい状況なので今後の課題としたいと思います。

Docker環境でキャッシュを使わないと後半部分が書き換わるのであれば、Dockerを使っていない本番環境であっても、参照しているキャッシュなど他の何かをクリアする事で書き換わるのではないかと想像しています。
その観点で今一度確認したいと思いますが、何かアドバイスがあればお願いいたします。
(ここのキャッシュ？は削除できる…など)

Answer 1

実際にはファイルの更新日付は変わるものの、ファイル名(ハッシュ値)は変更されませんでした。

ハッシュ値は、ファイルの内容を元にして付けられているので、リビルドしたとしても同じ内容のファイルであればハッシュ値も同じです。

Comments

[maisumakun]

ハッシュ値とは別にバージョン番号をファイル名に混ぜ込むような仕掛けをしておいて、手動でファイル名を全変更したい場合はバージョン番号の方を変える、という方法が考えられます。

[San]

なるほど！
「ハッシュ値」が何を元にしているかまでを考えていませんでした。

確かにバージョン番号などでファイル名(ハッシュ値がつかない部分)を変動させられるようにすれば、不意に変更が必要になった場合などに対応できそうですね。

有難うございました。

[San]

色々と調べたのですが、喫緊の対応が必要な事もあり、ご提案頂いた方法を取る事にしました。
具体的には、vue.config.jsの中で、ハッシュ値＋バージョン(今回は暫定で日付＋連番)を付与する事で、強制的にファイル名がビルド時に変わるような処理を追加しました。

現状は固定文字を入れてしまっているので、将来的には自動的にできるようにしたいとは思いますが、現状はこれでしのぐことにしたいと思います。

有難うございました。