You can not select more than 25 topics
			Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
		
		
		
		
			
				
					163 lines
				
				4.7 KiB
			
		
		
			
		
	
	
					163 lines
				
				4.7 KiB
			| 
								 
											4 years ago
										 
									 | 
							
								# Friendly-errors-webpack-plugin
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								[](https://www.npmjs.com/package/@soda/friendly-errors-webpack-plugin)
							 | 
						||
| 
								 | 
							
								[](https://travis-ci.org/sodatea/friendly-errors-webpack-plugin)
							 | 
						||
| 
								 | 
							
								[](https://ci.appveyor.com/project/sodatea/friendly-errors-webpack-plugin/branch/master)
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								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](https://help.github.com/articles/creating-a-pull-request/)!
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## Getting started
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								### Installation
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```bash
							 | 
						||
| 
								 | 
							
								npm install @soda/friendly-errors-webpack-plugin --save-dev
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								### Basic usage
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								Simply add `FriendlyErrorsWebpackPlugin` to the plugin section in your Webpack config.
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```javascript
							 | 
						||
| 
								 | 
							
								var FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								var webpackConfig = {
							 | 
						||
| 
								 | 
							
								  // ...
							 | 
						||
| 
								 | 
							
								  plugins: [
							 | 
						||
| 
								 | 
							
								    new FriendlyErrorsWebpackPlugin(),
							 | 
						||
| 
								 | 
							
								  ],
							 | 
						||
| 
								 | 
							
								  // ...
							 | 
						||
| 
								 | 
							
								}
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								### Turn off errors
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								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](https://github.com/FormidableLabs/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:
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								```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](https://www.npmjs.com/package/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
							 | 
						||
| 
								 | 
							
								      });
							 | 
						||
| 
								 | 
							
								    }
							 | 
						||
| 
								 | 
							
								  })
							 | 
						||
| 
								 | 
							
								```
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## 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](https://github.com/sodatea/friendly-errors-webpack-plugin/blob/master/src/core/extractWebpackError.js)
							 | 
						||
| 
								 | 
							
								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](https://github.com/sodatea/friendly-errors-webpack-plugin/blob/master/src/core/transformErrors.js),
							 | 
						||
| 
								 | 
							
								and [formatErrors](https://github.com/sodatea/friendly-errors-webpack-plugin/blob/master/src/core/formatErrors.js)
							 | 
						||
| 
								 | 
							
								in the source code and take a look a the [default transformers](https://github.com/sodatea/friendly-errors-webpack-plugin/tree/master/src/transformers)
							 | 
						||
| 
								 | 
							
								and the [default formatters](https://github.com/sodatea/friendly-errors-webpack-plugin/tree/master/src/formatters).
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								## TODO
							 | 
						||
| 
								 | 
							
								
							 | 
						||
| 
								 | 
							
								- [x] Make it compatible with node 4
							 | 
						||
| 
								 | 
							
								
							 |