Webpack构建后浏览器报错Uncaught ReferenceError: require is not defined

以下是几个常见的排查和解决方向：

1. 确认Webpack配置的target为浏览器环境 #

Webpack默认target是web，但如果配置中误设为node，会保留Node.js的require语法，导致浏览器无法识别。
在webpack.config.js里明确设置：

module.exports = {
  target: 'web',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: require('path').resolve(__dirname, 'dist')
  },
  // 其他配置项...
};

2. 页面必须引入Webpack打包后的文件 #

不要直接在HTML中引入index.js等源文件——源文件里的require是Node.js语法，浏览器不支持。必须引入Webpack生成的打包文件（比如bundle.js）：

<script src="/dist/bundle.js"></script>

同时确保Express服务器能正确访问静态资源，添加静态文件托管：

const express = require('express');
const app = express();

// 托管dist目录下的静态资源
app.use(express.static('dist'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

3. 检查Webpack输出是否正常 #

运行webpack命令后，去配置的output.path目录（比如dist）确认是否生成了打包文件。如果使用webpack-dev-server，打包文件存在于内存中，HTML里的脚本路径直接写/bundle.js即可。

4. 移除前端代码中的Node.js专属模块 #

如果tabs.js或modal.js中引入了fs、path等Node.js核心模块，Webpack无法将其完全转换为浏览器兼容代码，会导致require未定义。移除这类依赖，改用浏览器端的替代方案。

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