webpack bundle not letting the html recognize my js function

I have a function inside my HTML drawer where it autoclicks on the first tab when the page loads. When I use webpack to bundle the JS the html gives me a Uncaught ReferenceError: openTab is not defined which doesn't let my openTab function work when the page loads. The normal controller.js works without issue.

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        app: './src/js/controller.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist/build'),
        filename: 'controller.bundle.js'
    },
    module : {
        rules: [{
          // A regex that looks at all Javascript files
          test: /\.js?$/,
          exclude : /node_modules/,
          loader: 'babel-loader',
          //this is where we define our presets
          query: {
            presets:['@babel/preset-env']
          }
        }]
      }
}

package.json

"main": "controller.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0",
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.5",
    "express": "^4.17.1",
    "regenerator-runtime": "^0.13.5"
  }
}

home.html //content after the last div is where each tab content would be. When the function doesn't run all content is visible.

<div class="drawer__content">
            <div class="tab">
                <button class="tablinks " onclick="openTab(event, 'Home')" id="defaultOpen"><i class="fas fa-home"></i></button>
                <button class="tablinks" onclick="openTab(event, 'Fav')"><i class="fas fa-star"></i></button>
                <button class="tablinks" onclick="openTab(event, 'Settings')"><i class="fas fa-cogs"></i></button>
              </div>

controller.js

function openTab(evt, tabName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

      // Get all elements with class="tablinks" and remove the class "active"
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
      }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click()