有没有办法在webpack监视模式下在webpack上次更新构建时在屏幕上显示时间戳？

Question

有时在监视模式下运行webpack并编辑源文件时，我不确定webpack是否包含了我的更改。

每次webpack更新捆绑包时，有没有办法在控制台上打印时间戳？

Answer 1

您可以添加自定义插件，如：

config.plugins.push(function(){
    this.plugin('done', function(stats) {
        console.log(('\n[' + new Date().toLocaleString() + ']') + ' Begin a new compilation.\n');
    });
});

Answer 2

安装webpack-watch-time-plugin。

显示观察者重建发生的时间。

Answer 3

datou3600的答案很棒，但是为什么不做得更好呢？

增加一点延迟：

1. 文字放在结尾
2. 屏幕眨眼可见

代码如下：

config.plugins.push(function(){
    this.plugin('done', function(stats) {
        setTimeout(
            () => {
                console.log(('\n[' + new Date().toLocaleString() + ']') + ' --- DONE.\n');
            },
            100
        );
    });
});

Answer 4

只需更新为

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

您可以这样做：

class WatchTimerPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('Watch Timer Plugin', (stats) => {
      console.log(('\n[' + new Date().toLocaleString() + ']') + ' --- DONE.\n');
    });
  }
}

module.exports = WatchTimerPlugin;