调用webpack打包后的js中的函数报错问题

今天用原生js和jquery动态生成一个表单弹窗，因为想在使用的时候只引入一个js文件，所以想到用webpack将js和css打包到一起，这样就不用单独引入css文件了，结果使用过程中还是踩了一些坑。

文件里面js函数较多有生成dom的有校验的有提交表单获取值的，在这我只说一下出现问题的js函数，表单所有dom结构都是动态生成的，有两个点击事件是用原生js直接写到html标签上面的，一个方法是用来关闭表单一个方法是用来提交表单。

1.png 2.png

还有一个方法是给外部调用触发生成表单弹窗的方法

3.png

通过webpack打包后在页面中引入打包后的js文件，直接调用questionnaire方法打开控制台发现报未定义

4.png

webpack打包后的js文件中的方法和变量都变成了局部的，外部无法直接访问。解决办法：修改上面三个方法的定义方式

window.方法名 = function(){...}

将上面三个方法都改为显式添加到全局，打包后引入js调用方法即可正常显示。
前面的两个方法因为是在html中直接调用的所以还有另一种处理方法：添加事件监听

document.getElementById("question-pop-close").addEventListener("click",questionPopClose)
document.getElementById("pop-submit-btn").addEventListener("click",function(e){
    questionPopSubmit(e.target)
})

打包引入后发现同样是可以的。