脱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してコピーしてやればいいと思います。
しばらくはこんな構成でやってみたいと思います。