Tidy-errors-webpack-plugin

Tidy-errors-webpack-plugin recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience.

Getting started

Installation

npm install tidy-errors-webpack-plugin --save-dev

Basic usage

Simply add TidyErrorsWebpackPlugin to the plugin section in your Webpack config.

var TidyErrorsWebpackPlugin = require('tidy-errors-webpack-plugin');

var webpackConfig = {
  // ...
  plugins: [
    new TidyErrorsWebpackPlugin({
      errorsOnly: true
    }),
  ],
  // ...
}

Turn off errors

You need to turn off all error logging by setting your webpack config quiet option to true.

app.use(require('webpack-dev-middleware')(compiler, {
  quiet: true,
  publicPath: config.output.publicPath,
}));

If you use the webpack-dev-server, there is a setting in webpack's devServer options:

// webpack config root
{
  // ...
  devServer: {
    // ...
    quiet: true,
    // ...
  },
  // ...
}

If you use webpack-hot-middleware, that is done by setting the log option to a no-op. You can do something sort of like this, depending upon your setup:

app.use(require('webpack-hot-middleware')(compiler, {
  log: () => {}
}));

Options

You can pass options to the plugin:

new TidyErrorsPlugin({
  compilationSuccessInfo: {
    messages: ['You application is running here http://localhost:3000'],
    notes: ['Some additionnal notes to be displayed unpon successful compilation']
  },
  onErrors: function (errors) {
    // called when errors occured
  },
  onWarnings: function(warnings) {
    // called when warnings occured
  },
  // write all stats into file
  writeToFile: 'path/to/stats.json',
  // should show errors only or not
  errorsOnly: true,
  // dont show assets
  ignoreAsset: false,
  // should the console be cleared between each compilation?
  // default is true
  clearConsole: true
})

Adding desktop notifications

The plugin has no native support for desktop notifications but it is easy to add them thanks to node-notifier for instance.

var TidyErrorsPlugin = require('tidy-errors-webpack-plugin');
var notifier = require('node-notifier');
var ICON = path.join(__dirname, 'icon.png');

new TidyErrorsPlugin({
    onErrors: (,errors) => {
      const error = errors[0];
      notifier.notify({
        title: "Webpack error",
        message: error.name,
        subtitle: error.file || '',
        icon: ICON
      });
    }
  })
]

License

MIT License