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 信息该怎么显示。 如果你不希望使用 quietnoInfo 这样的不显示信息,而是又不想得到全部的信息,只是想要获取某部分 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 // 是否添加关于子模块的信息
  },

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):