A plugin to customize webpack's output

• Description
• Install
• Usage
• Configuration
• Custom Reporters
• HookData Structure
• Testing

There are currently 2 ways of customizing webpack's output, you can set the “stats” option to configure which bundle information you want to display or you can write a plugin (e.g. ProgressPlugin, webpackbar, friendly-errors-webpack-plugin). The second approach gives you more control over the output but requires a good knowledge of how webpack works internally. This plugin abstract over webpack's internals helping writing custom reporters.

You can install the plugin from npm using the following command:

npm install test-webpack-reporter-plugin --save-dev

or

yarn add test-webpack-reporter-plugin -D

You can use it like any other plugin in your webpack configuration:

webpack.config.js

module.exports={// ...plugins: [// each parameter is optionalnewReporterPlugin({hooks: {defaults: true,// wheter or not include the default hooks [default: true]compiler: {done: true,// listen this hookemit: false,// don't listen this hook},compilation: {buildModule: 5,// log this hook once every 5 timescontentHash: '2ms',// log this hook at most once every 2ms},},reporters: [// one or more custom reporters// this is the default one, used if no reporter is givennewReporterPlugin.Reporter(),],}),],};

Here's an example of how the output will look like (coloured for readability):

This plugin accepts an obect as parameter containing two properties:

An array containing one or more reporters that will log the events emitted by this plugin. If not set, a default one will be used.

constMyReporter=require('./MyReporter');//...newReporterPlugin({reporters: [newMyReporter()],});

An object used to configure which webpack hooks the plugin should listen and log. It can have those properties:

• defaults (optional)

  Tells the plugin if it should listen to a predefined set of hooks (e.g. compilation.done). Setting it to false will exclude every default hook, otherwise its default value is true.

• compiler (optional)

  Tells the plugin which compiler hooks should be included or excluded

  newReporterPlugin({hooks: {compiler: {beforeRun: false,// don't log this hookdone: true,// listen this hook},},});

• compilation (optional)

  Tells the plugin which compilation hooks should be included or excluded

  newReporterPlugin({hooks: {compilation: {seal: false,// don't log this hookrecord: true,// log this hook},},});

Some hooks like compilation.buildModule may be called many times during a webpack compilation, it is possible to limit the frequency of logging for specific hooks setting a "throttle value" that could be:

• integer

  Meaning that the hook will be logged once every given number of times the hook is called (e.g. once very 2 times)

  newReporterPlugin({hooks: {compilation: {buildModule: 2,},},});

• string

  A string encoding a milliseconds value (e.g. "2ms", '20ms') meaning that the hook will be logged once every given milliseconds

  newReporterPlugin({hooks: {compilation: {buildModule: '2ms',},},});

This plugin can be extended with one or more reporters. A custom reporter is similar to a usual webpack plugin:

reporter.js

classReporter{apply(reporter,outputOptions){// Adds a listener for a specific logreporter.hooks.info.tap('Reporter',this.onInfo);reporter.hooks.stats.tap('Reporter',this.onStats);reporter.hooks.error.tap('Reporter',this.onError);reporter.hooks.warn.tap('Reporter',this.onWarning);}onInfo(hookData){// print something}}

The reporter plugin has 4 sync waterfall hooks (see tapable): stats, info, warn and error. Each hook callback receives some data with this structure:

// data emitted by each reporter hookconsthookData={hookId: 'compiler.done',// hook's idcount: 0,// counter of times the hook is executedlastCall: 1561725682,// last hook trigger timestampmessage: 'Compilation finished',// custom messagecontext: {...},// optional, hook contextdata: {}// custom hook data}

npm run test

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Give a ⭐️ if this project helped you!

👤 Devid Farinelli

• Twitter: @misterdev_
• Github: @misterdev

Copyright © 2019 Devid Farinelli.
This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator