webpack之构建日志

当我们执行构建命令时候，会出现如下效果：

事实上，很多时候我们并不关注这些，只关注是否构建成功和错误信息。下面我们就一起来解决这个需求，让我们的命令行清爽整洁

不依赖插件

通过在webpack.config.js中设置stats

统计信息stats

•       errors-only 只在发生错误时输出
•       minimal  只在发生错误或有新的编译时输出
•       none  没有输出
•       normal  标准输出
•       verbose  全部输出

只是通过这种方式来设置，当我们构建成功后，命令行什么都没有输出，对我们不太友好。下面我们就通过插件来优化日志

通过插件实现优化

1. 安装  cnpm i friendly-errors-webpack-plugin -D
2. 配置：

   //部分代码省略
   const FriendlyErrorsWebpackPlugin=require('friendly-errors-webpack-plugin');
   
   plugins:[
      new FriendlyErrorsWebpackPlugin()
   ],
   stats:"none"

    

3. 构建打包，我们可以看到我们的命令行。成功后显示  Compiled successfully in 482ms   ，并以绿色显示