webpack 4.0.0升级至5.52.1后报Invalid regular expression错误如何解决

webpack 4 不会对代码中的正则表达式做静态解析校验，而 webpack 5 为了优化 tree shaking、常量折叠等编译能力，在JavascriptParser中新增了动态正则表达式的解析逻辑，遇到不符合ES规范的正则语法就会抛出报错。你遇到的报错来自某款第三方依赖中的旧版URL匹配正则，该正则的分组语法不符合ES规范，webpack 4 没有对应的校验逻辑所以不会触发报错。

• 给编译命令添加NODE_DEBUG=webpack前缀，或者在webpack配置中设置stats: 'verbose'，查看报错前最后解析的文件路径，即可定位到触发问题的第三方依赖包
• 也可以临时修改/node_modules/webpack/lib/javascript/JavascriptParser.js第410行附近的逻辑，添加代码打印当前解析的模块路径，直接定位问题依赖

• 方案1：升级webpack到5.76.0及以上的稳定版本，该版本修复了Parser对非捕获组正则的解析bug，大多数同类型报错可以直接解决
• 方案2：定位到触发问题的第三方依赖后，升级该依赖到最新版本，绝大多数公共包的URL正则兼容问题已经在后续版本修复
• 方案3：如果问题依赖不再维护，可以在webpack配置中添加module.noParse规则，跳过webpack对该依赖的解析：

// webpack配置文件，webpacker默认路径为config/webpack/base.js
module.exports = {
  module: {
    noParse: /node_modules\/<替换为问题依赖的包名>\//
  }
}

• 额外注意：你当前使用的webpacker 6.0.0.rc.2为预发布版本，存在较多webpack 5兼容问题，建议降级到webpacker 5稳定版或者升级到webpacker 6正式版，避免后续出现其他未知兼容问题。

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