在webpack的观察模式下，有没有一种方法可以在屏幕上显示webpack上次更新构建的时间戳？

Question

有时我在运行 webpack 的 watch 模式并编辑源文件时，不确定 webpack 是否已经打包了我的更改。

是否有一种方法可以在每次 webpack 更新 bundle 时在控制台上打印时间戳？

- Bjorn Reppen

Answer 1

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

config.plugins.push(new function() {
    this.apply = (compiler) => {
        compiler.hooks.done.tap("Log On Done Plugin", () => {
            console.log(("\n[" + new Date().toLocaleString() + "]") + " Begin a new compilation.\n");
        });
    };
});

- datou3600

Answer 2

datou3600的答案非常棒，但为什么不让它更好呢？

稍微添加一点延迟：

1. 文本被放置在最后
2. 屏幕会明显闪烁

以下是代码：

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

- Alexey Ruzin

Answer 3

安装webpack-watch-time-plugin插件。

此插件可以展示监视器重建时的时间。

- Bjorn Reppen

---

这似乎无法与webpack 5一起使用。 - jdunning

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;

- SetiZ

Answer 5

如果你想以编程方式使用时间戳，例如进行调试或确保远程同步最新版本构建工作正常，你也可以使用 webpack.DefinePlugin.runtimeValue：

new webpack.DefinePlugin({
    BUILDTIME: webpack.DefinePlugin.runtimeValue(Date.now, true)
})

这将始终通过常量BUILDTIME提供最新的构建时间。

- StrikeAgainst

Answer 6

问题也可以通过终端应用程序而不进行任何WebPack修改来解决。例如，在iTerm中有一个设置“显示时间戳”。 结果看起来像这样：

- Dmitry Davydov