2021-01-27に投稿

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

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

(※ 2019-01-29 に書いた記事のクロス投稿です)


単純な watch の実行:

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

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

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

関連

Originally published at memo88.hatenablog.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

sonota88

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント