webpack --watchでビルドが始まった時間をログに出す

webpack --watch を使っているとビルドが終わったのかどうかよくわからない事がたまにある。
(保存されればビルドされるはずなんですが・・・)

ビルドが始まった時間をログに出しておけばとりあえず動いたのかどうかが分かるようになるので、出すようにしてみた。

参考

webpack.config.js

const path = require('path')

module.exports = {
  entry: [
    path.join(__dirname, 'src', 'Main.jsx')
  ],
  output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js'
  },
  resolve: {
    // When requiring, you don't need to add these extensions
    extensions: ['', '.js', '.jsx']
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  plugins: [
    function () {
      this.plugin('watch-run', (watching, callback) => {
        console.log('\033[36m' + 'Begin compile at ' + new Date() + ' \033[39m')
        callback()
      })
    }
  ]
}

reactをjsにコンパイルするために用意したwebpack.config.jsをそのまま貼った。
時刻を表示しているのはpluginsの中で、 webpack -w を実行した時に呼ばれるコールバックを追加している。
console.logのそのままの出力だと他の文字にまぎれて見えにくいので色を青色に変更している。

こうすると、 webpack -w を実行すると時刻が表示され、

$ webpack -w
Begin compile at Mon Feb 15 2016 22:28:19 GMT+0900 (JST)
Hash: 311c9bb85a7a95541b85
Version: webpack 1.12.13
Time: 3590ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.79 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 327 hidden modules

普通に webpack した時には表示されないようになる

$ webpack
Hash: 311c9bb85a7a95541b85
Version: webpack 1.12.13
Time: 3596ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.79 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 327 hidden modules