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

Installation

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

Basic usage

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

varFriendlyErrorsWebpackPlugin=require('friendly-errors-webpack-malagu');varwebpackConfig={// ...plugins: [newFriendlyErrorsWebpackPlugin(),],// ...}

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,{// ...logLevel: 'silent',// ...}));

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 false. You can do something sort of like this, depending upon your setup:

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

Thanks to webpack-dashboard for this piece of info.

Demo

Build success

eslint-loader errors

babel-loader syntax errors

Module not found

Options

You can pass options to the plugin:

newFriendlyErrorsPlugin({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 trueclearConsole: 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.

varFriendlyErrorsPlugin=require('friendly-errors-webpack-plugin');varnotifier=require('node-notifier');varICON=path.join(__dirname,'icon.png');newFriendlyErrorsPlugin({onErrors: (severity,errors)=>{if(severity!=='error'){return;}consterror=errors[0];notifier.notify({title: "Webpack error",message: severity+': '+error.name,subtitle: error.file||'',icon: ICON});}})