在webpack监视模式下,是否有方法在屏幕上显示webpack上次更新构建版本的时间戳?

n9vozmp4  于 2023-03-08  发布在  Webpack
关注(0)|答案(6)|浏览(144)

有时候在监视模式下运行webpack并编辑源文件时,我不确定webpack是否打包了我的更改。
有没有办法在每次webpack更新bundle时向控制台打印时间戳?

jtjikinw

jtjikinw1#

您可以添加自定义插件,如:

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

a7qyws3x2#

datou3600的答案是令人敬畏的,但为什么不是为了更好呢?
增加一点延迟:
1.文本放置在末尾
1.屏幕明显 Flink
下面是代码:

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

iq3niunx3#

安装webpack-watch-time-plugin
它显示监视程序重建发生的时间。

tkclm6bt

tkclm6bt4#

只是更新一下

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;
q0qdq0h2

q0qdq0h25#

如果您希望以编程方式使用时间戳-例如用于调试,或确保最新构建的远程同步工作正常-您也可以使用webpack.DefinePlugin.runtimeValue

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

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

zynd9foi

zynd9foi6#

这个问题也可以在终端应用不做任何WebPack修改的情况下解决,比如在iTerm中有一个“显示时间戳”的设置。


结果如下:

相关问题