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!
npm install friendly-errors-webpack-plugin --save-devSimply add FriendlyErrorsWebpackPlugin to the plugin section in your Webpack config.
var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
var webpackConfig = {
// ...
plugins: [
new FriendlyErrorsWebpackPlugin(),
],
// ...
}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.
You can pass options to the plugin:
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: []
})The plugin has no native support for desktop notifications but it is easy to add them thanks to node-notifier for instance.
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
});
}
})Webpack's errors processing, is done in four phases:
- Extract relevant info from webpack errors. This is done by the plugin here
- Apply transformers to all errors to identify and annotate well know errors and give them a priority
- Get only top priority error or top priority warnings if no errors are thrown
- 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.
- Make it compatible with node 4
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent