Webpack打包TS项目浏览器运行报错：require未定义，求解决方案

我来帮你分析下这个问题，其实是你的Webpack配置里几个关键设置冲突了，直接导致浏览器环境无法识别代码里的require语法：

问题根源 #

1. nodeExternals()的误用：这个插件是给Node.js后端项目用的，它会告诉Webpack不要打包node_modules里的依赖，让代码运行时通过Node.js的require去加载。但浏览器环境根本没有require方法，所以当你的代码尝试加载aws-iot-device-sdk时就会报错。
2. libraryTarget: 'commonjs'不兼容浏览器：这个输出格式是为CommonJS模块规范设计的（Node.js用的），浏览器原生不支持这种语法，自然会出现require未定义的错误。
3. 配置目标冲突：你设置了target: 'web'（目标是浏览器），但前面两个配置都是针对Node.js环境的，完全不匹配。

解决方案 #

下面是调整后的Webpack配置，以及对应的注意事项：

1. 修改webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    // 如果aws-iot-device-sdk有专属的浏览器入口，可以添加别名（部分SDK会在package.json里定义browser字段，Webpack会自动识别，这一步可省略）
    // alias: {
    //   'aws-iot-device-sdk': 'aws-iot-device-sdk/browser'
    // }
  },
  // 移除nodeExternals配置，让Webpack把aws-iot-device-sdk打包进浏览器可用的bundle
  // externals: [nodeExternals()],
  output: {
    // 使用UMD格式，兼容浏览器、CommonJS和AMD环境
    libraryTarget: 'umd',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js',
  },
  target: 'web',
  module: {
    // Webpack 4+ 推荐用rules替代loaders
    rules: [
      { 
        test: /\.ts(x?)$/, 
        loader: 'ts-loader',
        exclude: /node_modules/
      },
    ],
  },
  // 处理aws-iot-device-sdk可能用到的Node.js核心模块（比如net、tls），浏览器环境不需要这些，用empty模拟
  node: {
    net: 'empty',
    tls: 'empty',
    fs: 'empty'
  }
};

2. 调整TypeScript配置（tsconfig.json）

确保TypeScript编译输出ES模块，方便Webpack更好地处理：

{
  "compilerOptions": {
    "module": "ESNext", // 输出ES模块
    "target": "ES5", // 兼容旧浏览器
    "strict": true,
    "esModuleInterop": true, // 处理CommonJS模块的导入
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist"
  }
}

3. 确认SDK的浏览器兼容性

有些Node.js SDK会提供专门的浏览器版本，如果调整配置后还是有问题，可以检查aws-iot-device-sdk的package.json里是否有browser字段，或者查看官方文档是否有浏览器端的使用说明。如果该SDK本身不支持浏览器环境，可能需要考虑替换为浏览器兼容的IoT SDK。

最后验证 #

重新运行Webpack打包，然后在浏览器中加载打包后的文件，应该就不会再出现require is not defined的错误了。

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