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 just to set up the workflow for copying it. This is the content of webpack.config.js:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    App: "./app/assets/scripts/App.js"
  },
  output: {
    path: path.resolve(__dirname, './app/temp/scripts'),
    filename: '[name].js',
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      query: {
        presets: ['es2015']
      },

      test: /\.js$/,

      include: [
        path.resolve(__dirname, "app")
      ],
      exclude: [
        path.resolve(__dirname, "node_modules")
      ],

    }],
  },
};

which I learned at this video course. But afterwards not all functions work. For instance, the functions called by event listeners work:

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

    $('#btn_basset').click(function () {
        voice = 2;
        loadFile();
    });

}

But those called from HTML do not:

<a href="javascript:void(0);" onclick="switchToScore();">Score</a>

Note that I am still referencing few others js files from HTML:

<script src="../javascript/basic-events.js" type="text/javascript">/**/</script>
<script src="../javascript/bootstrap.min.js" type="text/javascript">/**/</script>
<script src="../javascript/jquery-3.3.1.min.js" type="text/javascript">/**/</script>

I'd like it to change later, but currently I thought it should not be a problem. Maybe it is?

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