這里介紹兩種方法，
1、是webpack的stats的優(yōu)化方式
2、利用friendly-errors-webpack-plugin插件優(yōu)化日志

1、webpack的stats的優(yōu)化方式

主要有以下幾個配置參數：

image.png

默認情況下是verbose，也就是全部輸出，此刻我們將他改為“errors-only”方式，這個比較簡單，只需要在開發(fā)環(huán)境和生產環(huán)境的webpack.dev.js和webpack.prod.js中添加stats配置即可：

...
plugins: [...],
stats: 'errors-only'

2、利用friendly-errors-webpack-plugin插件優(yōu)化日志

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'

此時日志會出現(xiàn)seccess warning danger等效果，還附帶顏色

擴展：

使用webpack-dev-middleware運行開發(fā)環(huán)境的時候，控制臺錯誤信息之外的日志怎么讓它不顯示？

在webpack-dev-middleware的options加上stats: 'errors-only'就不會輸出這些信息了。

var compiler = webpack(webpackConfig);
var devMiddleware = require('webpack-dev-middleware')(compiler, {
   publicPath: '/',
   stats: 'errors-only', // 只在發(fā)生錯誤時輸出
   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 // 是否添加關于子模塊的信息
  },