More than 3 years have passed since last update.

WebpackerでHotReloadは動くが、コンパイル結果が反映されない

Last updated at 2021-09-02Posted at 2021-09-01

はじめに

最近は仕事でWebアプリケーションを作成しています。
本日もいつも通りWebページを作成し、Javascriptを書いたのですが、なぜかリロードしてもJavascriptが反応しませんでした。
色々調べたのですが、同じ現象の方がいなかったようなので、簡単にメモしていきます。

また、この解決に会社の上司の方が手助けをしてくれました。
タイトルも上司の方につけていただきました。

Docker(WSL2)環境で以下の問題がいきなり発生しました。

ローカルとコンテナをマウントしている状態で、JavaScriptのファイルを編集しましたが、なぜか反映さません。

JavaScriptはwebpackerのコンテナをDockerで立ち上げて管理しています。
JavaScriptを編集した後に保存(Ctrl+s)をすると、ホットリロードが働いていることはターミナルから確認ができます。

そして、ターミナルではCompling....と走っていました。

しかし、変更内容が反映していません。

久しぶりにJavaScriptを書き、以前はこのような事象にはなりませんでした。
また、最近Hyper-VからWSLに環境を変更したので、それが問題化と思いましたが先輩の環境でも同じ事象になりました。

おそらく何かしらの設定がおかしいようでした。
また、時々コンテナの立ち上げの問題でWebページのスタイルがつかないことがあるのですが、今回はF5でリロードしてもスタイルがつくことがありませんでした。

始めにスタイルがついていないとそれ以降はつくことはありませんでした。

以下の記事を確認して解決できました。

webpacker/development.ymlの以下の箇所が問題になっていました。

webpack.yml

# developmet
cache_manifest: true

この設定をいつ増やしたのかは忘れてしまいましたが、何かあって追加したのでしょう。
cache_manifestをtrueにすると初めにコンパイルした内容がCacheとして保存されるためそれ以降の変更が効かなくなります。これが原因でJavaScriptが反映されていませんでした。

以下のように修正します。

webpack.yml

# development
cache_manifest: false

また、該当行を削除することで、デフォルトのfalseに設定されます。行ごと削除したほうがよいです。

かなり沼ってしまい、時間がかかってしまいました。
とりあえず原因特定としては別の環境で同じことを確かめたほうがいいと思いました。

詳細にコードを載せたいところでしたが手元に環境がないためメモ程度にまとめてみました。
明日からやっと仕事が再開できます。先輩ありがとうございました。