RailsのWebpackerがコンパイルしているのにJavaScriptを実行してくれない、ホットリロードが効かない

はじめに

以前、Dockerを利用したRails+Webpackerの環境を作成したのですが、改めて作成する機会がありやってみたところ、webpackでつまづいてしまったのでその個所をまとめます。

問題

1. Webpackを設定したがコンパイルが行われない

/bin/webpack-dev-serverを起動したところ、public/packs/manifest.jsonができるけれども、public/packs/jsのディレクトリは作成されなかった。また/bin/webpackを実行するとコンパイルが実行されていたが、なぜかJavaScriptは読み込まれておらず、うまくコンパイルが行われていないようだった

以下の記事をみつけた

./config/webpacker.ymlのホストがlocalhostになっていたので、docker-compose.ymlのwebpackerコンテナの名前に変更することでJavaScriptがコンパイルされるようになった

./config/webpacker.yml

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: webpacker # 変更
    port: 3035
    public: localhost:3035
    hmr: false

docker-compose.yml

  webpacker: # ホスト名
    <<: *base
    environment:
      NODE_ENV: development
      RAILS_ENV: development
      WEBPACKER_DEV_SERVER_HOST: 0.0.0.0
    command: ./bin/webpack-dev-server
    ports:
      - '3036:3036'
    volumes:

2. Webpackerのホットリロードが効かない

/bin/webpack-dev-serverを時tぅこうしたところ
JavaScriptが初回時にコンパイルされるだけで、ファイルを変更してもホットリロードが効かなかった
webpackerのコンテナに入ってファイルをcatで表示したところローカルの変更が反映されていなかった

つまり、マウントをし忘れていた！

docker-compose.ymlのVolumesに追加をして解決

docker-compose.yml

    command: ./bin/webpack-dev-server
    ports:
      - '3036:3036'
    volumes:
      - .:/app # 追加
      - public-data:/app/public
    container_name: webpack

おわりに

Webpackは毎回何かしら問題が起きている気がします。
しっかりと動きを理解することが大切です。

参考

• Rails6をdocker-composeでホットリロードできる環境を構築する