2016年4月20日水曜日

webpack への移行

もともと watchify + Browser Sync で快適なビルド/開発環境だったが


この記事に感化されて CSS モジュールを使いたいがために webpack に移行した。

browserify 陣営にも css-modulesify というのがあるが、README に 「Please note that this is still highly experimental.」 と書かれててどうも挙動が怪しそうだったのでパスした。

そういう経緯で webpack に移行した際のメモ。
  • インクリメンタルビルドが遅く1〜2秒くらい掛かってたが、devtool を eval にしたら watchify と同等かそれ以上のパフォーマンスになった(ブラウザリロード合わせても 1秒以下)
  • 今のところコードの確認やステップ実行は eval で十分だが、source map でコードを確認したいときは別タスクで都度作る
  • source map を生成する場合も devtool に source-map を指定すると .map ファイルが生成されて掃除が面倒臭いので inline-source-map を使う
  • webpack@1.13.0 で inline-source-map 使うと文字化けするが次のリリースで修正される
  • ファイルの更新を watch する場合、Vagrant 環境では正しく検知されないので watchOptions.poll = true を指定する
  • 開発環境でのファイルホスティングと API の proxy は Browser Sync + α を使う(webpack-dev-server は使わない)
  • ブラウザのライブリロードは webpach --watch で bundle.js を生成しつつ、Browset Sync で bundle.js を監視
  • React Hot Loader は 差し替えられたファイルのブレイクポイントが引き継がれなかったので却下
という感じで一旦落ち着いた。ビルド環境周りに手を入れ始めるとすごく時間取られるので、しばらくはこの構成で落ち着いてほしい。

0 件のコメント :

コメントを投稿