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

Question

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

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

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");
        });
    };
});

Answer 2

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

添加一点延迟：

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

这是代码：

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

Answer 3

安装webpack-watch-time-plugin。

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

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;

Answer 5

如果您想以编程方式使用时间戳 - 例如用于调试，或确保最新版本的远程同步正常工作 - 您还可以使用webpack.DefinePlugin.runtimeValue：

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

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