Webpack 5生产环境打包引入axios时Terser报Unexpected token: punc (.)错误

问题表现 #

• 生产构建流程中，仅当React组件引入axios依赖时，Terser压缩环节会抛出Unexpected token: punc (.)语法解析错误
• 报错提示定位到打包产物的指定行存在无法识别的点号语法，错误堆栈完全来自Terser内部解析流程
• 移除axios引入后，构建流程可正常走完所有环节，无额外报错

稳定复现步骤 #

• 拉取对应问题示例仓库后，执行npm install完成全量依赖安装
• 运行npm run build触发生产构建，即可稳定触发上述报错

根因说明 #

出现这个报错是三个问题叠加导致的：

1. 使用的axios 0.21.1版本，在面向浏览器的打包产物里混进了ES2020的可选链（?.）语法
2. 项目的生产配置里，TerserPlugin写死了ecma: 6的压缩目标，搭配的旧版Terser解析器根本不认识这种高版本语法
3. 默认的Babel编译规则直接跳过了node_modules目录，没有给axios发布的代码做语法降级，最后压缩环节碰到不认识的?.语法，就把那个点号识别成了非法标点抛出错误

可直接落地的解决办法 #

• 调整TerserPlugin配置：把写死的ecma: 6参数去掉，或者把项目里的terser-webpack-plugin升到最新稳定版，让解析器能正常识别可选链语法
• 扩大Babel编译范围：在webpack的模块规则里，给node_modules/axios路径下的文件加上Babel转译逻辑，把里面的高版本语法降到ES6兼容水平
• 换个axios版本：绕开有问题的0.21.1版本，要么降到没这个毛病的0.21.0，要么升到经过兼容性验证的0.24.0以上的正式版本

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