脱webpackerしてみた

今風のフロントエンド開発環境をサクッと構築してくれたwebpackerだけど、(3系からかな？)webpackに関する各種設定が@rails/webpackerパッケージに内包されてしまってカスタマイズがし辛くなっていた。

実際ぶち当たった問題としては、fontファイルが読み込めなかったからresolve-url-loaderを使いたかったんだけど、webpack.config.jsは存在しないので以下のようにゴニョゴニョするという…。 https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader

今後カスタマイズしたいことが増えてくると面倒くさくなりそうなのでいっそフロントエンドはRailsから剥がして素のwebpackをつかったほうがいいんじゃないかと思ってやってみました。（前からJSのライブラリ使いたい時にそれをwrapしたgemを入れるのも違和感があった）

この辺りを参考にさせていただきました。

• https://qiita.com/dakatsuka/items/c815a27b9740c843bee0
• http://engineer.crowdworks.jp/entry/2016/05/24/174511
• https://qiita.com/necojackarc/items/afa674ab10aafa9784eb#appassetsjavascripts%E4%BB%A5%E4%B8%8B%E3%82%92%E4%B8%80%E6%8E%83%E3%81%99%E3%82%8B

ポイントは参考記事にもあるようにjavascript_pack_tagとか無くなるんでwebpackでbuildしたアセットを読み込むためのヘルパーを作成すること。

あとdockerを使っているのでRailsのコンテナとwebpack-dev-serverのコンテナを分離できて、rubyのイメージにnodeをいれたりゴニョゴニョやってたDockerfileがすっきりした。 docker-compose.ymlは以下のような感じになった。

  webpack-dev-server:
    build:
      context: .
      dockerfile: Dockerfile.webpack
    command: yarn run dev
    volumes:
      - .:/work
      - /work/node_modules
    environment:
      NODE_ENV: development
    ports:
      - "8080:8080"

  rails:
    build:
      context: .
      dockerfile: Dockerfile.rails
    command: |
      ash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/work
      - /work/node_modules
    environment:
      WEBPACK_DEV_SERVER_HOST: localhost
      WEBPACK_DEV_SERVER_PORT: 8080
    ports:
      - "3000:3000"

production環境の場合はどうせCDNとかに置いちゃうと思うのでwebpack buildしてコピーしてやればいいと思います。

しばらくはこんな構成でやってみたいと思います。