一、问题
html文件
<input id="move-to-left" type="button" onClick="moveToLeft();" value="左移" />
js
// 向左移动地图
function moveToLeft() {
var view = map.getView();
var mapCenter = view.getCenter();
// 让地图中心的x值增加，即可使得地图向左移动，增加的值根据效果可自由设定
mapCenter[0] += 50000;
view.setCenter(mapCenter);
map.render();
}
webpack打包js后html调用js文件中的函数
二、原因
webpack的打包是基于模块来打包的，也就是说经过打包的文件代码是被打包到一个函数里，此时所有定义的变量或者方法已变成局部的。有了独立的作用域，定义变量，声明函数都不会污染全局作用域。
三、解决办法
方法1：提升作用域
window.moveToLeft=function () {
moveToLeft()
}
方法2：在js中绑定事件
//定义点击事件
function onClick(id, callback) {
document.querySelector(`#${id}`).addEventListener('click',callback)
}
onClick('move-to-left',function () {
moveToLeft()
})
