Webpack打包后OpenLayersMap未定义问题求助

问题根源 #

你的Webpack配置中，output.library仅指定了type: "umd"，但未设置全局暴露的变量名称，导致打包后的OpenLayersMap类没有挂载到全局window对象上，HTML中的脚本自然找不到该类。

解决方案 #

1. 修改Webpack配置，指定全局暴露的类名 #

更新webpack.config.js的output配置，添加library.name：

output: {
    library: {
        name: "OpenLayersMap", // 全局作用域中暴露的类名
        type: "umd"
    },
},

UMD格式会自动适配不同环境：在浏览器中挂载到window，在Node.js中支持模块导入，既满足全局实例化需求，又不破坏模块化特性。

2. 在HTML中正常实例化并获取实例 #

修改后重新打包，HTML中的脚本即可直接实例化类，同时获取实例对象用于后续操作：

<script>
   // 自定义目标ID传入，同时获取实例
   const mapInstance = new OpenLayersMap("map");
   // 可直接访问实例属性或方法，比如获取原生OpenLayers地图对象
   console.log(mapInstance.map);
</script>

方案优势 #

• 支持自定义目标ID：无需在index.js硬编码DOM元素ID，HTML端可灵活传入
• 保留实例控制权：直接获取类实例，方便后续调用实例方法、修改地图配置
• 兼容模块化场景：UMD格式不影响该类在其他Node.js项目或模块系统中导入使用

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