Webpack如何将单个类导出为可直接全局调用的UMD库？

修改Webpack配置 #

你目前需要嵌套调用的原因是Webpack默认会把模块的所有导出内容打包为一个命名空间对象，只需要调整output下的library相关配置即可：

Webpack 5 配置示例 #

修改webpack.config.js中的output字段：

const path = require('path');
module.exports = {
  // 入口、loader等其他原有配置保持不变
  output: {
    path: path.resolve(__dirname, 'bundles'),
    filename: 'semVersion.js',
    library: {
      name: 'SemVersion', // 全局挂载的变量名
      type: 'umd', // 保留UMD格式兼容多环境
      export: 'default', // 关键配置：直接将模块指定导出项作为全局变量的值
      // 如果你使用命名导出而非默认导出，此处改为对应导出名即可，如 export: 'SemVersion'
    },
    globalObject: 'this' // 兼容浏览器和Node环境的全局对象指向
  }
}

Webpack 4 配置示例 #

配置写法略有差异：

const path = require('path');
module.exports = {
  // 其他原有配置保持不变
  output: {
    path: path.resolve(__dirname, 'bundles'),
    filename: 'semVersion.js',
    library: 'SemVersion',
    libraryTarget: 'umd',
    libraryExport: 'default', // 作用同Webpack5的library.export
    globalObject: 'this'
  }
}

匹配模块导出规则 #

确保你的入口文件导出写法和配置对应：

• 如果配置的是export: 'default'，入口文件采用默认导出：

// 入口文件如index.js
class SemVersion {
  // 类逻辑代码
}
export default SemVersion

• 如果配置的是export: 'SemVersion'，入口文件采用命名导出：

// 入口文件如index.js
export class SemVersion {
  // 类逻辑代码
}

修改配置后重新打包，页面引入产物后即可直接调用new SemVersion()使用，无需额外嵌套命名空间。

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