Как добавить текущую метку времени для вывода в webpack4, если она работает в режиме просмотра с минимальным выводом

Question

Когда вы выполняете CI и у вас открывается небольшое окно с веб-пакетом, который просматривает ваши файлы, иногда трудно увидеть, обнаружил ли веб-пакет ваши изменения (окна 10 здесь).

Поэтому я уменьшил вывод с помощью --display = минимальный.Но сейчас на выходе просто «33 модуля».Все выглядят одинаково.

Я хочу добавить временную метку к выводу, чтобы я мог их различать.

Было решение для webpack3, которое даст вам предупреждение об устаревании в webpack4:

Tapable.plugin is deprecated. Use new API on `.hooks` instead

Поэтому, пожалуйста, не используйте это:

--do not use this in webpack4--  

module.exports = {
  plugins: [
    this.plugin('done',function(){/*...*/})
  ]
}

--do not use this in webpack4--

Я пропустил путь миграции.

Answer 1

Это решение для webpack4:

// webpack.config.js
module.exports = {
  plugins: [
    function() {
      this.hooks.done.tap('BuildStatsPlugin', function() {
        console.log(new Date().toLocaleTimeString());
      });
    }
  ]
};

Так что, если вы сейчас сделаете ...

webpack --watch --display=minimal

... всякий раз, когда вы изменяете один из ваших файлов, веб-пакет будет перекомпилироваться идобавьте только две строки к выводу консоли:

webpack is watching the files…

22:05:34
   33 modules
22:16:04
   33 modules

Если это было полезно для вас, пожалуйста, подумайте над тем, чтобы поднять голос, чтобы другие могли его найти!