使用React和Webpack构建网页时遇require未定义错误，求根因及方案

错误的根本原因 #

先看你提供的bundle.js代码，里面用到了require('systemjs-builder')和__dirname——这些都是Node.js环境独有的API，浏览器根本不认识这些变量！

问题出在：你把一个Node端的构建脚本（用来调用systemjs-builder打包其他模块的工具代码）当成了浏览器要运行的React应用代码，Webpack错误地把这段Node专属代码打包进了浏览器bundle里，导致浏览器执行时找不到require和__dirname，直接报错。

具体解决方案 #

1. 拆分Node构建脚本和浏览器业务代码

把你现在的bundle.js改名为build.js（明确这是Node端的构建工具），然后用Node直接执行它，而不是交给Webpack打包：

node build.js

这个脚本会生成真正的浏览器可用打包文件（比如app-bundle.js），之后你只需要在HTML里引入这些生成好的文件就行，别把build.js本身放到浏览器里运行。

2. 修正Webpack配置

• 确保Webpack的入口是你的React应用入口（比如app.js），而不是这个build.js脚本。
• 检查Webpack的target配置：如果设置成了'node'，Webpack会保留Node端的require语法，这时候要改回默认的'web'（浏览器环境），让Webpack把CommonJS模块语法转换成浏览器能识别的代码。

3. 理清构建工具的使用逻辑

你现在同时用了Webpack和systemjs-builder，这很容易混淆：

• 如果用Webpack构建React应用，完全不需要systemjs-builder。直接配置Webpack处理React的babel-loader、设置入口输出，用webpack命令打包即可。
• 如果一定要用systemjs-builder，那它是Node端的打包工具，单独用Node执行打包脚本，生成的产物再给浏览器用，和Webpack分开用，别混在一起。

关于你尝试的externals方案无效的原因

externals是用来告诉Webpack忽略某些模块，让它们在运行时由外部环境提供。但你之前的错误是因为打包了Node端代码，externals解决的是浏览器端依赖外部库的问题，对这种“打包了Node专属代码”的场景完全不适用，所以没效果。

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