使用 Logger 输出消息是一种向用户展示信息的有效方式。
Webpack Logger 可以用在 loader 和 plugin。生成的 Logger 将作为 统计信息 的一部分进行输出,并且用户可以在 webpack 配置文件 中对 Logger 进行配置。
在 Webpack 中使用自定义 Logger API 的优点:
通过引入 Webpack Logger API,我们希望统一 Webpack plugins 和 loaders 生成日志的方式,并提供更好的方法来检查构建问题。 集成的 Logging 解决方案可以帮助 plugins 和 loader 的开发人员提升他们的开发经验。同时为非 CLI 形式的 Webpack 解决方案构建铺平了道路,例如 dashboard 或其他 UI。
my-webpack-plugin.js
const PLUGIN_NAME = my-webpack-plugin;
export class MyWebpackPlugin {
apply(compiler) {
// you can access Logger from compiler
const logger = compiler.getInfrastructureLogger(PLUGIN_NAME);
logger.log(log from compiler);
compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
// you can also access Logger from compilation
const logger = compilation.getLogger(PLUGIN_NAME);
logger.info(log from compilation);
});
}
}
my-webpack-loader.js
module.exports = function (source) {
// you can get Logger with `this.getLogger` in your webpack loaders
const logger = this.getLogger(my-webpack-loader);
logger.info(hello Logger);
return source;
};
从上面的 my-webpack-plugin.js 例子中你可以看到,有两种打印日志的方法,
当 plugin/logging 与编译相关时,建议使用 compilation.getLogger,它们将存储在 stats 中。对于在编译周期之外发生的日志记录,请改用 compiler.getInfrastructureLogger。
Runtime logger API 仅应该用作开发工具,不应该包含在生产模式中。
const logging = require(webpack/lib/logging/runtime);
logging.configureDefaultLogger({
level: log,
debug: /something/,
});