优化构建时的日志、异常中断处理

一、优化构建日志

当我们在打包项目时，默认控制台会打印出来很多的日志信息，非常详细，但是其实我们并不需要获得到所有的日志信息，我们想突出重要的信息，比如错误、警告等，webpack提供了一个stats属性，它的值有：

• errors-only：只展示错误信息。
• minimal：只在发生错误或者有新的编译时输出。
• none：不输出任何东西。
• normal：正常输出。
• verbose：输出所有的日志。

但是它的提示还不够友好，提示不够明显，我们可以使用friendly-errors-webpack-plugin插件来进行优化，它只需要实例化，并放入plugins中就可以了。

二、异常中断处理

异常中断处理其实是利用this.hooks.done.tap函数做自定义的错误处理。

代码：

function () {
  this.hooks.done.tap('done', stats => {
    if (stats.compilation.errors && stats.compilation.errors.length) {
      process.exit(9);
    }
  });
}

将这段代码加入到plugins中即可，可以在该函数中做一些上报等操作。这个配置是webpack4的，webpack3中使用this.plugin.done就可以了。