这里介绍两种方法，
1、是webpack的stats的优化方式
2、利用friendly-errors-webpack-plugin插件优化日志
1、webpack的stats的优化方式
主要有以下几个配置参数：
image.png
默认情况下是verbose，也就是全部输出，此刻我们将他改为“errors-only”方式，这个比较简单，只需要在开发环境和生产环境的webpack.dev.js和webpack.prod.js中添加stats配置即可：
...
plugins: [...],
stats: 'errors-only'
2、利用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: [
new FriendlyErrorsWebpackPlugin() // 在plugins数组中加入该插件
],
stats: 'errors-only'
此时日志会出现seccess warning danger等效果，还附带颜色
扩展：
使用webpack-dev-middleware运行开发环境的时候，控制台错误信息之外的日志怎么让它不显示？
在webpack-dev-middleware的options加上stats: 'errors-only'就不会输出这些信息了。
var compiler = webpack(webpackConfig);
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: '/',
stats: 'errors-only', // 只在发生错误时输出
quiet: true //turn off errors to work with friendly-errors-webpack-plugin
});
stats 选项让你更精确地控制 bundle 信息该怎么显示。 如果你不希望使用 quiet 或 noInfo 这样的不显示信息，而是又不想得到全部的信息，只是想要获取某部分 bundle 的信息，使用stats选项是比较好的方式
如果是使用 webpack-dev-server，这个属性要放在 devServer 配置对象.
对于 webpack-dev-middleware, 该属性需要在webpack-dev-middleware 的 options 对象中配置.
参考链接：stats 对象 - webpack
我的stats配置参数：
stats: {
env: true, // 是否展示 --env 信息
colors: true, // 是否输出不同的颜色
chunks: false, // 是否添加关于 chunk 的信息
assets: false, // 是否展示资源信息
modules: false, // 是否添加关于构建模块的信息
children: false // 是否添加关于子模块的信息
},
