前端小册

Appearance

On this page

优化命令行和构建捕获 ​

统计信息 stats ​

PresetAlternativeDescription
errors-onlynone只在发生错误时输出
minimalnone只在发生错误或有新的编译时输出
nonefalse没有输出
normaltrue标准输出
verbosenone全部输出
js
// webpack.config.js
module.exports = {
    ...
    devServer: {
        stats: 'errors-only'
    }
}

如何优化 ​

  • friendly-errors-webpack-plugin
    • success 构建成功
    • warning 构建警告
    • error 构建报错
  • stats 设置成 errors-only
js
// webpack.config.js
module.exports = {
   plugins: [
       ...
       new FriendlyErrorsWebpackPlugin()
   ],
   devServer: {
       stats: 'errors-only'
   }
}

构建异常和中断处理 ​

webpack4 之前版本构建失败不会抛出错误码

Node.js 中的 process.exit 规范

  • 0 表示成功完成，回调函数中，err 为 null
  • 非 0 表示执行失败，回调函数中，err 不为 null，err.code 就是传给 exit 的数字

如何主动捕获 ​

  • compiler 在每次构建结束后触发 done 这个 hook
  • process.exit 主动处理构建报错
js
// webpack.config.js
plugins: [
        function() {
            this.hooks.done.tap('done', (stats) => {
                if (stats.compilation.errors && stats.compilation.errors.length && process.argv.indexOf('--watch') == -1)
                {
                    console.log('build error');
                    process.exit(1);
                }
            })
        }
]