最近在使用webpack重新搭建项目，在启动了webpack之后发现在终端输出了很多信息，看着很别扭，效果如下：

于是参考了vue-cli的配置，使用FriendlyErrorsWebpackPlugin插件来解决这个问题

首先，安装插件

npm i -D friendly-errors-webpack-plugin node-notifier

然后，配置wecpack

// webpack.config.js 
const utils = require('./utils'); //工具
const config = require('../config'); // webpack运行环境配置，可自行设置
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
module.exports = {
    // ... 
    devServer: {
      // ... 
      quiet: true, // 如果使用webpack-dev-server，需要设为true，禁止显示devServer的console信息
    },
    plugins: [
        // ... 
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: [`Your application is running here: ${config.dev.https ? 'https' : 'http'}://${config.dev.host}:${config.dev.port}`],
            },
            onErrors: config.dev.notifyOnErrors
                ? utils.createNotifierCallback()
                : undefined,
            clearConsole: true,
        }),
    ],
}

再运行webpack，效果如下

完美！现在干净多了！

另外，还可以利用 webpack-dev-server 的 overlay 配置选项可以在编译出现错误时，将错误直接显示在页面上。

devServer: {
    // ... 
    overlay: true, // 编译出现错误时，将错误直接显示在页面上
},

效果如下：