webpack - 如果以最少的输出以监视模式运行，如何将当前时间戳添加到 webpack4 中的输出

Question

当您执行 CI 并打开一个带有 webpack 的小窗口查看您的文件时，有时很难看出 webpack 是否检测到您的更改(这里是 windows 10)。

因此我使用 --display=minimal 减少了输出。但现在输出只是“33 个模块”。看起来都一样。

我想在输出中添加时间戳，以便区分它们。

webpack3 有一个解决方案，它会在 webpack4 中给你一个 DeprecationWarning:

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 将重新编译并仅向控制台输出添加两行:

webpack is watching the files…

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