Webpack友好的錯誤提示插件friendly-errors-webpack-plugin

Friendly-errors-webpack-plugin 介紹

Friendly-errors-webpack-plugin識別某些類別的webpack錯誤，並清理，聚合和優先級，以提供更好的開發人員體驗。

咱們運行nodejs 能夠看到錯誤信息以下：

 

安裝入門

npm install friendly-errors-webpack-plugin --save-dev

基本用法

只需將FriendlyErrorsWebpackPlugin添加到Webpack配置中的插件部分便可。

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

 

var webpackConfig = {

  // ...

  plugins: [

    new FriendlyErrorsWebpackPlugin(),

  ],

  // ...

}

關閉錯誤

您須要經過將webpack config quiet選項設置爲true來關閉全部錯誤日誌記錄。

app.use(require('webpack-dev-middleware')(compiler, {

  quiet: true,

  publicPath: config.output.publicPath,

}));

若是您使用webpack-dev-server，webpack的devServer選項中有一個設置：

// webpack config root

{

  // ...

  devServer: {

    // ...

    quiet: true,

    // ...

  },

  // ...

}

若是使用webpack-hot-middleware，則能夠經過將log選項設置爲false來完成。你能夠作一些這樣的事情，具體取決於你的設置：

app.use(require('webpack-hot-middleware')(compiler, {

  log: false

}));

選項

您能夠將選項傳遞給插件：

 

new FriendlyErrorsPlugin({
// 運行成功
compilationSuccessInfo：{
message：['你的應用程序在這裏運行http：// localhost：3000']，
notes：['有些附加說明要在成功編輯時顯示']
},
// 運行錯誤
onErrors：function（severity，errors）{
//您能夠收聽插件轉換和優先級的錯誤
//嚴重性能夠是'錯誤'或'警告'
},
//是否每次編譯之間清除控制檯
//默認爲true
clearConsole：true,

//添加格式化程序和變換器（見下文）
additionalFormatters: [],
additionalTransformers: []
})

添加桌面通知

該插件沒有桌面通知的原生支持，須要引入node-notifier，這樣就能夠了 。

var NotifierPlugin = require('friendly-errors-webpack-plugin');

var notifier = require('node-notifier');

var ICON = path.join(__dirname, 'icon.png');

 

new 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

 

從webpack錯誤中提取相關信息。 這是經過這裏的插件完成的將變換器應用於全部錯誤，以識別和註釋衆所周知的錯誤併爲其提供優先級若是沒有拋出錯誤，則僅獲取最高優先級錯誤或最高優先級警告將格式化程序應用於全部帶註釋的錯誤