Webpack开启代码分割后TerserPlugin抛出语法无效错误如何解决？

问题根因 #

1. 运算符优先级导致的语法解析异常：你提供的报错行代码中，+运算符优先级远高于三目运算符?:，未加括号的情况下表达式会被解析为如下逻辑，不符合代码预期也触发了Terser的语法校验规则：

   ("resources/" + chunkId + "." + __webpack_require__.h) ? __webpack_require__.h() : (fa5d2a76a3dcf571c28b + ".css")
   

2. mini-css-extract-plugin 注入代码缺陷：这段拼接CSS路径的代码是CSS抽离插件mini-css-extract-plugin注入到webpack runtime中的，旧版本插件注入的代码既没有处理三目运算符的优先级，也没有给默认hash常量fa5d2a76a3dcf571c28b添加引号，导致生成的JS代码存在语法隐患。
3. 代码分割触发报错：未开启代码分割时webpack不会生成动态拼接chunk资源路径的runtime代码，因此不会触发该问题；开启懒加载+代码分割后这段错误代码被生成，才会被Terser识别到抛出异常。

解决方案 #

• 方案一：修复Terser配置的ECMAScript版本，匹配项目语法规范：

  new TerserPlugin({
    test: /.js$/i,
    extractComments: false,
    terserOptions: {
      ecma: 2015, // 可根据项目最低兼容版本调整，一般设置为2015即可解决解析异常
      output: { comments: false },
    },
  })
  

• 方案二：升级mini-css-extract-plugin到2.4.5及以上稳定版本，该版本已经官方修复了runtime注入代码的语法缺陷。
• 方案三（临时应急）：在webpack的output配置中关闭CSS contenthash，或者修改hash生成规则：

  output: {
    // 其他配置不变
    hashFunction: 'xxhash64'
  }
  

• 方案四：如果不需要抽离runtime代码，直接在optimization配置中添加runtimeChunk: false，避免生成这段动态路径拼接代码。

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