Webpack 5浏览器端报错Uncaught ReferenceError: require is not defined

该报错是Webpack配置错误导致的，核心问题有两个：

1. 配置矛盾：你设置了target: 'web'要构建浏览器端运行的产物，却同时加了externalsPresets: { node: true }配置。这个配置是专门给Node.js环境构建用的，作用是把所有Node.js内置模块（包括events、path等）标记为外部依赖，不打包进bundle，直接保留源码里的require('模块名')调用。浏览器原生不支持CommonJS规范的require语法，运行到这段代码就会直接抛出ReferenceError。
2. Webpack 5 兼容逻辑变更：从Webpack 5开始，官方移除了Webpack 4自带的Node.js核心模块自动浏览器polyfill能力，就算修复上面的配置错误，也需要手动声明对应模块的浏览器兼容实现，否则还是会出现模块找不到的问题。

1. 删除错误的externals配置 #

打开Webpack配置文件，直接删除externalsPresets: { node: true }这一行，浏览器端构建不需要该配置。

2. 配置Node模块浏览器polyfill #

首先安装缺失的polyfill依赖：

# 安装events模块的浏览器兼容实现，以及你项目依赖的path模块兼容包
npm install events path-browserify --save

然后修改Webpack配置的resolve字段，添加fallback映射，告诉Webpack打包浏览器端代码时，遇到Node内置模块该替换成哪个兼容包：

resolve: {
  extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
  alias: {
    '~': path.resolve(__dirname, '../src'),
    handlebars: 'handlebars/dist/handlebars.min.js',
  },
  // 新增以下fallback配置
  fallback: {
    "events": require.resolve("events/"),
    "path": require.resolve("path-browserify"),
    "util": require.resolve("util/")
  }
},

你项目里已经安装了util包，直接配置映射即可。

3. （可选优化）调整TS编译配置 #

你当前tsconfig.json里compilerOptions.module设置为commonjs，虽然可以正常运行，但会影响Webpack Tree Shaking的优化效果，建议改成ESNext，让Webpack更好地做无用代码剔除，减小产物体积：

{
  "compilerOptions": {
    // 其余配置保持不变，仅修改module字段
    "module": "ESNext",
  }
}

4. 清缓存重启服务 #

删除项目下的node_modules/.cache缓存目录，重新执行npm run start启动开发服务，报错即可解决。修复后打包产物中原来的module.exports = require("events")代码会被替换为polyfill的实现代码，不再保留浏览器无法识别的裸require调用。

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