Webpack 5升级后浏览器报Required is not defined，该排查Webpack还是Babel？

核心结论：优先排查Webpack配置，与Babel无关 #

你碰到的问题根源是Webpack 5的模块处理逻辑变化导致的，和Babel（7.20.0版本）没有关系。具体分析：

禁用Source Map后看到的require("./runtime-main.js")是未被Webpack正确处理的CommonJS语法——浏览器环境本身不支持Node.js的require函数，因此直接抛出错误。

Webpack 5和Webpack 4的模块处理逻辑差异较大，尤其是开发服务器相关配置，大概率是以下问题导致：

• Webpack配置中的target字段被设置为node（而非默认的浏览器环境），导致输出Node.js兼容代码，保留了require语法
• webpack-dev-server版本与Webpack 5不兼容，需使用支持Webpack 5的v4及以上版本
• 自定义的runtimeChunk或output配置干扰了Webpack的runtime生成逻辑，未将require替换为浏览器可识别的模块加载逻辑

具体排查步骤： #

• 检查Webpack配置的target字段，确保设置为'web'，或直接删除该字段使用默认值
• 升级webpack-dev-server、webpack-cli到与Webpack 5兼容的最新稳定版
• 核对optimization.runtimeChunk和output配置，避免破坏Webpack默认的runtime生成流程
• 暂时排除第三方依赖问题——从报错代码来看，问题出在Webpack自身生成的代码中，优先搞定配置即可

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