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 @x-wp/friendly-errors-webpack-plugin --save-devSimply add FriendlyErrorsWebpackPlugin to the plugin section in your Webpack config.
varFriendlyErrorsWebpackPlugin=require('@x-wp/friendly-errors-webpack-plugin');varwebpackConfig={// ...plugins: [newFriendlyErrorsWebpackPlugin(),],// ...}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:
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: []})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});}})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.
This project uses Conventional Commits and releases are cut automatically from master by semantic-release. Every push to master whose commit history contains a release-triggering type publishes a new version to npm, commits an updated CHANGELOG.md, and tags the release.
| Commit type | Release bump |
|---|---|
feat | minor |
fix | patch |
perf | patch |
compat | patch |
refactor | minor |
style | patch |
chore | none |
docs, test, build, ci, revert | none |
any type with a BREAKING CHANGE: footer | major |
The authoritative configuration lives in .releaserc; the table above is a summary. When in doubt, open a PR with a chore: or docs: commit — those won't trigger a release.