Friendly-errors-webpack-plugin

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

It is easy to add types of errors so if you would like to see more
errors get handled, please open a PR!

Getting started

$3

``bash
npm install friendly-errors-webpack-malagu --save-dev
`

$3

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

`javascript
var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-malagu');

var webpackConfig = {
// ...
plugins: [
new FriendlyErrorsWebpackPlugin(),
],
// ...
}
`

$3

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

`javascript
app.use(require('webpack-dev-middleware')(compiler, {
// ...
logLevel: 'silent',
// ...
}));
`

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

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

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

`javascript
app.use(require('webpack-hot-middleware')(compiler, {
log: false
}));
`

_Thanks to webpack-dashboard for this piece of info._

Demo

$3

!success

$3

!lint

$3

!babel

$3

!babel

Options

You can pass options to the plugin:

`js
new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: ['You application is running here http://localhost:3000'],
notes: ['Some additional notes to be displayed upon successful compilation']
},
onErrors: function (severity, errors) {
// You can listen to errors transformed and prioritized by the plugin
// severity can be 'error' or 'warning'
},
// should the console be cleared between each compilation?
// default is true
clearConsole: true,

// add formatters and transformers (see below)
additionalFormatters: [],
additionalTransformers: []
})
`

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.

`js
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
var notifier = require('node-notifier');
var ICON = path.join(__dirname, 'icon.png');

new FriendlyErrorsPlugin({
onErrors: (severity, errors) => {
if (severity !== 'error') {
return;
}
const error = errors[0];
notifier.notify({
title: "Webpack error",
message: severity + ': ' + error.name,
subtitle: error.file || '',
icon: ICON
});
}
})
``