webpack --watch で差分ビルドの完了時に任意のコマンドを実行する

＜他の記事の案内です＞

素朴な自作言語のコンパイラをTypeScript（Deno）に移植した

＜案内おわり＞

「任意のコマンドを実行」としたけど、要するに完了にフックして通知がしたい。

単純な watch の実行:

$(npm bin)/webpack --watch --config webpack.config.js

これだけだと（差分）ビルド完了の検出がやりにくそうなので、 --info-verbosity verbose を追加する。

Watch and WatchOptions > info-verbosity

Setting info-verbosity to verbose will also message to console at the beginning and the end of incremental build. info-verbosity is set to info by default.

$(npm bin)/webpack --watch --config webpack.config.js \
  --info-verbosity verbose

開始時と完了時にこういうメッセージが出力される:

Compilation  starting…
Compilation  finished

あとは適当なラッパーを書いて、完了メッセージを検出してコマンドを実行すればOK。 Ubuntu だと notify-send コマンドで通知できる。 Webpack の設定でできるか調べるよりこっちの方が速かった……。まあでもこの方法なら webpack 以外でも使いまわせるし、いいよね、ということにしておく。

#!/usr/bin/env ruby

require "pty"

npm_bin = `npm bin`.chomp

watch_cmd = [
  "#{npm_bin}/webpack",
  "--watch",
  "--config webpack.config.js",
  "--color=false",
  "--info-verbosity verbose"
].join(" ")

PTY.spawn(watch_cmd) do |i, o|
  loop do
    line = i.gets
    print line
    if line.chomp == "Compilation  finished"
      timestamp = Time.now.strftime("%F %T")
      system "notify-send 'Compilation finished #{timestamp}'"
    end
  end
end

試しにやってはみたものの、今手元にあるものは規模が小さくてビルドがすぐ終わるので便利になったかよく分からない（やる前に気付こう）。

$(npm bin)/webpack --version
4.29.0