html文件调用webpack打包js文件出现函数not def

一、问题

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()
})