如何精简Babel-Parser错误堆栈跟踪？Webpack Babel-Loader优化

Webpack的stats配置无法处理babel-loader抛出的Babel Parser原始错误堆栈，因为这类错误是loader内部生成的，不属于Webpack自身的统计输出范畴。以下是几种可行的精简方案：

方案一：自定义babel-loader错误格式化 #

通过babel-loader的customize选项，编写自定义错误处理函数来截断堆栈信息：

1. 在项目根目录创建babel-error-formatter.js文件：

module.exports = (err, message) => {
  // 分割错误信息，只保留代码报错部分，去掉后续的调用堆栈
  const codeErrorPart = message.split('\n    at ')[0];
  return codeErrorPart;
};

2. 在webpack.config.js中配置babel-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            customize: './babel-error-formatter.js'
          }
        }
      }
    ]
  }
};

方案二：通过Webpack插件拦截并修改错误输出 #

编写一个简单的Webpack插件，在构建完成后截断错误堆栈：

module.exports = {
  plugins: [
    {
      apply(compiler) {
        compiler.hooks.done.tap('TruncateErrorStackPlugin', (stats) => {
          if (stats.hasErrors()) {
            stats.compilation.errors.forEach(error => {
              // 仅保留代码报错的核心信息，移除Babel Parser的调用堆栈
              error.message = error.message.split('\n    at ')[0];
            });
          }
        });
      }
    }
  ]
};

以上方案都会将错误输出截断到你示例中的第67行位置，只保留代码语法错误的核心提示和代码片段。

内容的提问来源于stack exchange，提问作者Tobias Madsen