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錯誤中提取相關信息。這是通過這里的插件完成的
將變換器應用于所有錯誤，以識別和注釋眾所周知的錯誤并為其提供優先級
如果沒有拋出錯誤，則僅獲取最高優先級錯誤或最高優先級警告
將格式化程序應用于所有帶注釋的錯誤

posted @ 2019-03-29 16:41 Angelasp 閱讀(13296) 評論(0) 收藏舉報

刷新頁面返回頂部