Webpack打包类模块报错：classA未定义或无法作为构造函数使用的问题求助

我帮你梳理下问题所在，以及对应的解决办法——你遇到的核心问题是Webpack的库导出配置没有完全匹配你的模块导出方式，导致全局环境下无法正确访问到classA类本身，而是拿到了模块包装对象，自然会出现「未定义」或「无法作为构造函数使用」的错误。

问题分析 #

方案1的问题 #

你用了具名导出（export class classA），虽然配置了library: 'classA'和libraryTarget: 'umd'，但Webpack默认会把整个模块导出为classA对象。这时候你直接调用new classA()，其实是在尝试把模块对象当作构造函数使用，必然报错。

方案2的问题 #

你改成了默认导出（export default class classA）并添加了libraryExport: 'default'，但可能忽略了压缩工具混淆类名的问题，导致全局环境下找不到正确的类名。

正确解决方案 #

情况1：使用具名导出（export class classA） #

修改webpack.config.js的output配置，添加libraryExport: 'classA'，告诉Webpack直接把模块里的classA成员作为库的导出结果：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'classA.bundle.js',
  library: 'classA',
  libraryTarget: 'umd',
  libraryExport: 'classA' // 指定导出具名的classA成员
}

情况2：使用默认导出（export default class classA） #

保持libraryExport: 'default'，同时确保压缩工具保留类名（避免被混淆成无法识别的变量名）：

// output配置
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'classA.bundle.js',
  library: 'classA',
  libraryTarget: 'umd',
  libraryExport: 'default' // 指定导出默认成员
},

// TerserPlugin配置
optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      parallel: true,
      terserOptions: {
        keep_classnames: true, // 强制保留类名，防止被压缩混淆
        keep_fnames: true
      }
    })
  ]
}

额外验证步骤 #

1. 打包完成后，在浏览器中引入脚本：

   <script src="./dist/classA.bundle.js"></script>
   <script>
     // 在脚本加载完成后调用
     const instance = new classA();
     console.log(instance); // 验证是否成功实例化
   </script>
   

2. 打开浏览器控制台，打印classA，如果显示为class classA { ... }或function classA() { ... }，说明配置正确；如果是一个包含default属性的对象，说明libraryExport配置有误。

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