kenjuの日記

About Programming, Mathematics and Security

webpackビルドの進捗を標準出力に表示させる方法

webpack-core がビルドの進捗を取得できる ProgressPlugin を用意しているので、それを使えばパーセンテージとタスク内容メッセージが取得できる。

github.com

シンプルに標準出力に書き出したいならば、ざっと以下のような感じ

// webpack.config.js
  plugins: [
    ...
    new webpack.ProgressPlugin((percentage, msg) => {
      const stream = process.stdout;
      if (!stream.isTTY) return;
      stream.cursorTo(0); // 常にログが左端から出力させるようにカーソルの位置を戻す
      stream.write(`${Math.floor(percentage * 100)}%: ${msg}`); // "50%: build assets" 的なログを吐く
      stream.clearLine(1); // clearLine しないとログが蓄積され続ける
    }),
  ]

ざっくりと

  • webpack.ProgressPlugin() で percentage, msg が取得できる
  • Node.js ランタイムでは process.stdout, process.stderr で標準出力を扱える
  • 標準出力はReadableオブジェクトなので、Readline のAPIをよしなに使える

あたりが押さえておくべきこと。

応用的な実装は

あたりのライブラリが参考になる。