unexpected modifying of the *.js by webpack

Question

I\'m new to webpack and similar tools. I wanted to reorganize my project. Currently all my JS-code lives in App.js. So before splitting it into modules and improving, I wanted j

Answer 1

Webpack wraps all code in an IIFE, for more predictable behavior and to avoid global pollution, among other things. In the bundled code, the place where your module's functions are defined is not the top level of the <script>.

Inline attribute event handlers may only reference global variables., and are quite a bad idea in nearly all cases. While you could fix it by explicitly assigning the function to window, eg:

window.switchToScore = function() {
  // ...

instead of

function switchToScore() {
  // ...

It would be much better to remove the inline attribute event handlers completely, and attach listeners with Javascript, just like you're doing with

$('#btn_soprano').click(function () {
    voice = 1;
    loadFile();
});