webpack之优化构建时命令行的显示日志（stats、friendly-errors-webpack-plugin）

这里介绍两种方法，1、是webpack的stats的优化方式 2、利用friendly-errors-webpack-plugin插件优化日志

 

1、webpack的stats的优化方式

主要有以下几个配置参数：

默认情况下是verbose，也就是全部输出，此刻我们将他改为“errors-only”方式，这个比较简单，只需要在开发环境和生产环境的webpack.dev.js和webpack.prod.js中添加stats配置即可：

stats: 'errors-only'

2、利用friendly-errors-webpack-plugin插件优化日志

安装friendly-errors-webpack-plugin插件：

npm install friendly-errors-webpack-plugin -D

在webpack.dev.js和webpack.prod.js中引入插件：

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

在plugins数组中加入该插件：

    plugins: [
        new FriendlyErrorsWebpackPlugin()
    ]

此时日志会出现seccess warning danger等效果，还附带颜色，如下所示：