webpackで差分ビルドをする

はじめに

大規模なjavascript開発をする時に便利なwebpackですが、微調整の度にビルドをするのは面倒くさいです。差分を検知してそこだけビルドしてくれる方法はないの？と思いますが実はあります。ポイントは以下の2つです。

• WATCH モード
• casheを有効にする

WATCHモードを使う

WATCHモードとはビルド対象のファイルに変化があった場合に検知して、自動的に再ビルドしてくれる機能のことです。コマンドラインからwebpackを実行している場合は、以下のようなオプションをつけることでWATCHモードにすることができます。
参考文献

webpack --watch

cacheを有効にする

cacheを有効にするにはwebpack.config.jsのcacheをtrueに設定します。
参考文献

module.exports = {
   entry: ......
   output: .....

   // これを追加するだけでcacheが有効になる
   cache: true
}

grunt-webpackで上記設定をやるには

趣味で作ってるゲームでは、gruntからwebpackを叩いています。それに使っているのはgrunt-webpackなのですが、こいつで上記の設定をやるには、以下のようにします。

module.exports = {
   // cache有効化はwebpack.config.jsと同じ
   cache: true,

   // これでwatchモードを有効にする
   // 基本的にkeepalive: trueとセットで指定すること
   // keepaliveはgruntタスクを終了させないという意味で、
   // これを指定しないとgruntタスクが速攻で終了してしまいwatchできない
   watch: true,
   keepalive: true
}

サンプルコードなど

手前味噌ですが、自作ゲームでwebpack差分ビルドを設定したところのコードです。
https://github.com/kaidouji85/gbraver/blob/d1bab0412120531f06d2a55fc5e64cd06e6e381e/grunt/webpack/webpack.watch.config.js

また、プロジェクト全体のコードはこちらです。
https://github.com/kaidouji85/gbraver/tree/d1bab0412120531f06d2a55fc5e64cd06e6e381e