nuxt/friendly-errors-webpack-plugin

Name: friendly-errors-webpack-plugin

Owner: NUXT

Description: Recognizes certain classes of webpack errors and cleans, aggregates and prioritizes them to provide a better Developer Experience.

Forked from: geowarin/friendly-errors-webpack-plugin

Created: 2018-03-16 06:37:46.0

Updated: 2018-03-20 07:23:00.0

Pushed: 2018-03-20 07:22:59.0

Homepage:

Size: 341

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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

install @nuxtjs/friendly-errors-webpack-plugin --save-dev

Basic usage

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

FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

webpackConfig = {
 ...
ugins: [
new FriendlyErrorsWebpackPlugin(),

 ...

Turn off errors

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

use(require('webpack-dev-middleware')(compiler, {
iet: true,
blicPath: config.output.publicPath,

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

ebpack config root

 ...
vServer: {
// ...
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:

use(require('webpack-hot-middleware')(compiler, {
g: 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:

FriendlyErrorsPlugin({
mpilationSuccessInfo: {
messages: ['You application is running here http://localhost:3000'],
notes: ['Some additionnal notes to be displayed unpon successful compilation']

Errors: 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
earConsole: true,

 INFO:    all logs
 WARNING: warnings and errors
 ERROR:   only errors
 SILENT:  no log
gLevel: true,

 add formatters and transformers (see below)
ditionalFormatters: [],
ditionalTransformers: []

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.

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

NotifierPlugin({
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
  });
}

API

Transformers and formatters

Webpack's errors processing, is done in four phases:

1. Extract relevant info from webpack errors. This is done by the plugin here
2. Apply transformers to all errors to identify and annotate well know errors and give them a priority
3. Get only top priority error or top priority warnings if no errors are thrown
4. Apply formatters to all annotated errors

You can add transformers and formatters. Please see transformErrors, and formatErrors in the source code and take a look a the default transformers and the default formatters.