webpacker を使って見た感想

こんにちわ。ユニバの MJ です。
今回は rails の上で動くフロントエンド開発で webpacker を使って javascript 周りの開発の準備をしたので、その覚書です。

webpacker

webpacker とは rails の構成上で いい感じに webpack でファイルをビルドできるようにしてくれる仕組みを提供してくれる gem です。

今まで

webpacker 以前でも、 rails 案件で webpack など Node製のビルドツールを使用している方も多いでしょう。
僕から見た 今までの構成と webpacker を使った場合の構成を比較して見ます。

今まで通りの webpack を使った構成

• あるフォルダを自分で作って、その中に生成のための必要な素材一式をおく
• development では dev-server を立ち上げて rails はそこのソースコードを読みに行く
• production では webpack-manifest-plugin などを使って、rails が発行するような hash 値を名前につけて build する

webpacker

• module は npm ではなく yarn で管理するため 先にインストールしておくべし brew install yarn -g とかで ok
• Gemfile に gem 'webpacker', github: 'rails/webpacker' を記述し install
  • ./bin/rails webpacker:install と叩けば既存のプロジェクトに webpack 用の構成が追加される
• 管理用のフォルダは別れる
  • コード類は /app/javascripts/pack
  • ビルド環境系は /config/webpack
  • モジュール類は /vendor
• ソースコードは常に public/packs/ に生成される

というのが主なところである。

webpacker が用意してくれた install コマンドを使えば、細かい設定を除けば すぐに webpack がコンパイルしてくれる環境が整うのは非常に便利だし、常に public にビルドしたファイルがやってくるのも便利であると感じた。

面倒と感じたのは、今まで一元的に管理していたフォルダ構成がバラバラになったのと、いちいち module の install を ./bin/yarn add --dev hoge みたいな感じにしないといけないぐらいである。

つまりは便利。きゃっほー

webpacker は webpack2.0

あと注意すべきは webpack2.0 の設定周りであろうか。
webpacker が用意してくれる config ファイルがそもそも 2.0 形式で書かれているので大丈夫かとは思うが、
postcss 周りの設定が如何せんうまくいかなかった(webpacker 関係ないけど)。

そういう人は http://qiita.com/namazu510/items/beb930472a4b76c2fd64 この素晴らしい記事を拝見すると良いかもしれない。

要点としては、postcss の plugins のオプションをどうやって渡すかの話に尽きるのだが、

plugins: [
	new webpack.LoaderOptionsPlugin({
	  options: {
	    postcss: [
	      require('postcss-cssnext')({
	          autoprefixer: {
	            browsers: [
	              'Explorer >= 11',
	              'Android >= 4.0',
	              'iOS >= 8'                      ]
	          }
	        }
	      )
	    ]
	  }
	})
]

moudle.rules の中で同じような記述をしても正常に渡せなかった。ので上のように plugins の項目で 渡してやると良い。

終わりに

これがスタンダードになるんやろか。
development の時には ./bin/webpack-watcher なるコマンドを叩いて、ファイルの更新を行うのだが。
terminal の画面が一つ埋まるやだな〜。と思っているので、どうにかならんかしら。
foreman 使っても1個減るし。 anvil 経由の pow で立ち上げてるから変わらんか。。。