当我们执行构建命令时候,会出现如下效果:
事实上,很多时候我们并不关注这些,只关注是否构建成功和错误信息。下面我们就一起来解决这个需求,让我们的命令行清爽整洁
不依赖插件
通过在webpack.config.js中设置stats
统计信息stats
- errors-only 只在发生错误时输出
- minimal 只在发生错误或有新的编译时输出
- none 没有输出
- normal 标准输出
- verbose 全部输出
只是通过这种方式来设置,当我们构建成功后,命令行什么都没有输出,对我们不太友好。下面我们就通过插件来优化日志
通过插件实现优化
- 安装 cnpm i friendly-errors-webpack-plugin -D
- 配置:
//部分代码省略 const FriendlyErrorsWebpackPlugin=require('friendly-errors-webpack-plugin'); plugins:[ new FriendlyErrorsWebpackPlugin() ], stats:"none"
- 构建打包,我们可以看到我们的命令行。成功后显示 Compiled successfully in 482ms ,并以绿色显示