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.

162 lines
4.7 KiB

4 years ago
  1. # Friendly-errors-webpack-plugin
  2. [![npm](https://img.shields.io/npm/v/friendly-errors-webpack-plugin.svg)](https://www.npmjs.com/package/friendly-errors-webpack-plugin)
  3. [![Build Status](https://travis-ci.org/geowarin/friendly-errors-webpack-plugin.svg?branch=master)](https://travis-ci.org/geowarin/friendly-errors-webpack-plugin)
  4. [![Build status](https://ci.appveyor.com/api/projects/status/w6fovc9lttaqgx3k/branch/master?svg=true)](https://ci.appveyor.com/project/geowarin/friendly-errors-webpack-plugin/branch/master)
  5. Friendly-errors-webpack-plugin recognizes certain classes of webpack
  6. errors and cleans, aggregates and prioritizes them to provide a better
  7. Developer Experience.
  8. It is easy to add types of errors so if you would like to see more
  9. errors get handled, please open a [PR](https://help.github.com/articles/creating-a-pull-request/)!
  10. ## Getting started
  11. ### Installation
  12. ```bash
  13. npm install friendly-errors-webpack-plugin --save-dev
  14. ```
  15. ### Basic usage
  16. Simply add `FriendlyErrorsWebpackPlugin` to the plugin section in your Webpack config.
  17. ```javascript
  18. var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
  19. var webpackConfig = {
  20. // ...
  21. plugins: [
  22. new FriendlyErrorsWebpackPlugin(),
  23. ],
  24. // ...
  25. }
  26. ```
  27. ### Turn off errors
  28. You need to turn off all error logging by setting your webpack config quiet option to true.
  29. ```javascript
  30. app.use(require('webpack-dev-middleware')(compiler, {
  31. quiet: true,
  32. publicPath: config.output.publicPath,
  33. }));
  34. ```
  35. If you use the webpack-dev-server, there is a setting in webpack's ```devServer``` options:
  36. ```javascript
  37. // webpack config root
  38. {
  39. // ...
  40. devServer: {
  41. // ...
  42. quiet: true,
  43. // ...
  44. },
  45. // ...
  46. }
  47. ```
  48. 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:
  49. ```javascript
  50. app.use(require('webpack-hot-middleware')(compiler, {
  51. log: false
  52. }));
  53. ```
  54. _Thanks to [webpack-dashboard](https://github.com/FormidableLabs/webpack-dashboard) for this piece of info._
  55. ## Demo
  56. ### Build success
  57. ![success](http://i.imgur.com/MkUEhYz.gif)
  58. ### eslint-loader errors
  59. ![lint](http://i.imgur.com/xYRkldr.gif)
  60. ### babel-loader syntax errors
  61. ![babel](http://i.imgur.com/W59z8WF.gif)
  62. ### Module not found
  63. ![babel](http://i.imgur.com/OivW4As.gif)
  64. ## Options
  65. You can pass options to the plugin:
  66. ```js
  67. new FriendlyErrorsPlugin({
  68. compilationSuccessInfo: {
  69. messages: ['You application is running here http://localhost:3000'],
  70. notes: ['Some additionnal notes to be displayed unpon successful compilation']
  71. },
  72. onErrors: function (severity, errors) {
  73. // You can listen to errors transformed and prioritized by the plugin
  74. // severity can be 'error' or 'warning'
  75. },
  76. // should the console be cleared between each compilation?
  77. // default is true
  78. clearConsole: true,
  79. // add formatters and transformers (see below)
  80. additionalFormatters: [],
  81. additionalTransformers: []
  82. })
  83. ```
  84. ## Adding desktop notifications
  85. The plugin has no native support for desktop notifications but it is easy
  86. to add them thanks to [node-notifier](https://www.npmjs.com/package/node-notifier) for instance.
  87. ```js
  88. var NotifierPlugin = require('friendly-errors-webpack-plugin');
  89. var notifier = require('node-notifier');
  90. var ICON = path.join(__dirname, 'icon.png');
  91. new NotifierPlugin({
  92. onErrors: (severity, errors) => {
  93. if (severity !== 'error') {
  94. return;
  95. }
  96. const error = errors[0];
  97. notifier.notify({
  98. title: "Webpack error",
  99. message: severity + ': ' + error.name,
  100. subtitle: error.file || '',
  101. icon: ICON
  102. });
  103. }
  104. })
  105. ]
  106. ```
  107. ## API
  108. ### Transformers and formatters
  109. Webpack's errors processing, is done in four phases:
  110. 1. Extract relevant info from webpack errors. This is done by the plugin [here](https://github.com/geowarin/friendly-errors-webpack-plugin/blob/master/src/core/extractWebpackError.js)
  111. 2. Apply transformers to all errors to identify and annotate well know errors and give them a priority
  112. 3. Get only top priority error or top priority warnings if no errors are thrown
  113. 4. Apply formatters to all annotated errors
  114. You can add transformers and formatters. Please see [transformErrors](https://github.com/geowarin/friendly-errors-webpack-plugin/blob/master/src/core/transformErrors.js),
  115. and [formatErrors](https://github.com/geowarin/friendly-errors-webpack-plugin/blob/master/src/core/formatErrors.js)
  116. in the source code and take a look a the [default transformers](https://github.com/geowarin/friendly-errors-webpack-plugin/tree/master/src/transformers)
  117. and the [default formatters](https://github.com/geowarin/friendly-errors-webpack-plugin/tree/master/src/formatters).
  118. ## TODO
  119. - [x] Make it compatible with node 4