Webpack：构建异常和终端处理

[hubvue]

获取构建错误码

使用echo $?可以获取到构建错误码

  "scripts": {
    "prod": "webpack --mode production && echo $?",
  },

想上面代码这样，在每次构建命令后写上echo $?，构建完成之后输出就可以获取到错误码。

如果错误码不为0，则构建失败；为0，则构建成功。

webpack中error流程

在webpack从捕获到错误到输出错误的流程如下

捕获错误---->process.exit(1)---->output

Node的process.exit(0)规范

0表示构建完成，回电函数中err为null

非0表示构建失败，回调函数中err不为null，err.code就是传给exit的数字

webpack如何捕获

webpack的compiler实例在每次构建结束后会触发done这个hook，解决方案是：自写插件，，hook到done这个钩子上，回调参数就是stats，通过判断stats.compilation.errors的长度是否为0，输出错误。

const pluginName = 'ErrorPlugin'

class ErrorPlugin {
  apply(compiler) {
    compiler.hooks.done.tap(pluginName, stats => {
      console.log(stats.compilation.errors)
      if (
        stats.compilation.errors &&
        stats.compilation.errors.length &&
        process.argv.includes('-- watch')
      ) {
        console.log('build error')
        process.exit(1)
      }
    })
  }
}

module.exports = ErrorPlugin