Log current time during webpack watch

Question

I'm trying to improve developer experience with webpack, and I want to log the current time when running watch command, so I know when an error occurs behind the scenes, making the watch not to execute but no errors(Good to know when last, compile run and the last time you made changes to a certain project file). I can't find that options @ https://webpack.js.org/configuration/watch/ Like the way typescript compiler works.

Answer 1

You can use webpack compilers watchRun hook.

create plugin with watchRun hook

const PLUGIN_NAME = 'TimeLoggerPlugin';

class TimeLoggerPlugin {
    apply(compiler) {

        compiler.hooks.watchRun.tap(PLUGIN_NAME, (compiler) => {
            const logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
            logger.info(`[Message from ${PLUGIN_NAME}] Compilation Done ${new Date().toLocaleString()}`);
        })
    }
}

module.exports = TimeLoggerPlugin;

import it in you webpack config

const TimeLoggerPlugin = require('./TimeLoggerPlugin');

and pass it to plugin array

plugins: [ new TimeLoggerPlugin()]

You can add you custom functionality as per requirement into watchRun for additional output.