Webpack Plugins

friendly-errors-webpack-plugin v 1.7.0

插件的GitHub

本插件可以识别webpack中的某些类别的错误，并对它们进行清理、聚合和排序，以提供更好的开发体验。

开始

安装

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

基本使用

将FriendlyErrorsWebpackPlugin加入您的 Webpack 插件配置即可。

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

var webpackConfig = {
    // ...
    plugins: [
        new FriendlyErrorsWebpackPlugin(),
    ],
    // ...
}
1
2
3
4
5
6
7
8
9

关闭错误

您可以将 webpack 配置项中的quite设置为true来关闭错误日志。

app.use(require('webpack-dev-middleware')(compiler, {
    // ...
    logLevel: 'silent',
    // ...
}));
1
2
3
4
5

如果正在使用webpack-dev-server，这里也有一些devServer的配置项：

// webpack config root
{
    // ...
    devServer: {
        // ...
        quiet: true,
        // ...
    },
    // ...
}
1
2
3
4
5
6
7
8
9
10

如果您使用了webpack-hot-middleware，可以将配置项log设置为false。根据您的配置，可以这样做：

app.use(require('webpack-hot-middleware')(compiler, {
    log: false
}));
1
2
3

Demo

Build success

image

eslint-loader errors

image

babel-loader syntax errors

image

Module not found

image

配置项

插件接收如下配置项：

new FriendlyErrorsPlugin({
    compilationSuccessInfo: {
        messages: ['您的应用运行在 http://localhost:3000'],
        notes: ['编译成功后会显示信息嗷┗|｀O′|┛ ']
    },
    onErrors: function (severity, errors) {
        // 您可以监听由插件转换和排序产生的错误
        // 错误级别可以设置为`错误`或`警告`
    },
    // 每次编译时都清空控制台么？
    // 默认：true
    clearConsole: true,

    // 添加格式化方法和转换方法(如下)
    additionalFormatters: [],
    additionalTransformers: []
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

添加桌面通知

该插件不支持桌面通知，但实现这个功能很简单，基于node-notifier即可。

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
        });
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

API

格式化方法和转换方法

Webpack 的错误流程分四个步骤：

  1. 从webpack错误中提取相关信息。这是由这里的插件完成的。
  2. 对所有的错误应用转换方法，从而识别和注释已知的错误，并给予它们优先级。
  3. 如果没有抛出错误，那么只获取最高优先级的错误或最高优先级的警告。
  4. 对所有带注释的错误应用格式化方法。

您可以自行添加转换方法和格式化方法。请查看源代码中的transformErrors和formatErrors，同时也看看默认的transformers和formatters。

← webpack-jarvis →