I have an express server that compiles handlebar files into html based on the route and I am using webpack to compile javascript files into one js file per page the user navigates to.

I am trying to access global functions that I defined in my javascript files from my html files to register onclick events and I can't seem to get it to work. The page loads fine

Here is the resulting HTML from the handlebars file:

<button onclick="OnButton_Open()">

Here is the function in the webpack compiled javascript:

OnButton_Open = function  () {
    here's my function
}

If I leave the function like above, the page loads, but when I click I get an error that it can't find OnButon_Open.

window.OnButton_Open = function  () {
    here's my function with the global prefix
}

If I prefix the function with window. which is what I thought that I had to do in this situation, I will actually get a reference error as the page loads that OnButon_Open is not defined. This is what the resulting webpack code looks like at the spot where I get the error:

/* harmony export (immutable) */ __webpack_exports__["OnButton_Open"] = OnButton_Open;

Is there a better way to make those functions accessible to the outside world? I'd happily put everything in the global scope for now until I can modularize this app a bit more.