使用friendly-errors-webpack-plugin优化webpack的控制台输出

如果自己用webpack搭建脚手架的时候，我们经常会看见这么一大串的串的输出：

为了简化，我们在webpack.config.js加入stats: "errors-only"，这样只有在输出的时候会报错：


为了更加优雅一下我们可以使用friendly-errors-webpack-plugin。

yarn add --dev friendly-errors-webpack-plugin

配置如下：

plugins: [
    // ...
    new FriendlyErrorsWebpackPlugin({
      // 成功的时候输出
      compilationSuccessInfo: {
        messages: [`Your application is running here: http://localhost:8080`]
      },
      // 是否每次都清空控制台
      clearConsole: true,
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, "../dist"),
    host: 'localhost',
    port: 8080,
    open: false,
    quiet: true // 如果使用webpack-dev-server，需要设为true，禁止显示devServer的console信息
  }

更多配置参考：friendly-errors-webpack-plugin