はじめに
大規模な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