在 webpack watch 期间记录当前时间

Question

我正在尝试改善 webpack 的开发人员体验，并且我想在运行ning watch 命令时记录当前时间，这样我就知道什么时候在幕后发生错误，让 watch 不执行但没有错误（很高兴知道最后一次编译运行和最后一次更改某个项目文件的时间）。我找不到那个选项 @ https://webpack.js.org/configuration/watch/ 就像打字稿编译器的工作方式一样。

Answer 1

你可以使用 webpack 编译器 `watchRun` hook。

使用 watchRun 挂钩创建插件

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;

在你的 webpack 配置中导入它

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

并将其传递给插件数组

plugins: [ new TimeLoggerPlugin()]

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

在 webpack watch 期间记录当前时间

Log current time during webpack watch

frontend

webpack

你可以使用 webpack 编译器 `watchRun` hook。

在 webpack watch 期间记录当前时间

Log current time during webpack watch

frontend

webpack

你可以使用 webpack 编译器 watchRun hook。

你可以使用 webpack 编译器 `watchRun` hook。