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

这里介绍两种方法，
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 // 是否添加关于子模块的信息
  },