Is there a way in webpack watch mode to display on screen the timestamp when webpack last updated the build?

Question

Sometimes while running webpack in watch mode and editing source files I am not sure whether webpack has packed my changes or not.

Is there a way to print a timestamp to the console each time webpack updates the bundle?

Praise

Answer 1

You can add a custom plugin like:

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

Perfervid

Answer 2

The answer of datou3600 is awesome, but why not to be better?

Adding a little delay:

1. The text is placed at the end
2. A screen blinks noticeable to an eye

Here is the code:

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

Examination

Answer 3

Install webpack-watch-time-plugin.

It displays the time when watcher rebuild happens.

Praise

This doesn't seem to work with webpack 5. – Homologue

Answer 4

Just an update as

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

you can do it like this:

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

module.exports = WatchTimerPlugin;

Spenserian

Answer 5

In case you wanted to use the timestamp programmatically - e.g. for debugging, or to ensure that remote synchronization of your latest build worked properly - you could also use webpack.DefinePlugin.runtimeValue:

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

This would always give you the latest build time through the constant BUILDTIME.

Hypesthesia

Answer 6

The problem also may be solved without any WebPack modification by the terminal app. For instance, in the iTerm there is a setting "Show Timestamps".

The result looks like that:

Baton