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错误中提取相关信息。 这是经过这里的插件完成的将变换器应用于全部错误，以识别和注释众所周知的错误并为其提供优先级若是没有抛出错误，则仅获取最高优先级错误或最高优先级警告将格式化程序应用于全部带注释的错误