Как получить доступ к коду на стороне клиента из пакета, созданного webpack

Я очень новичок в веб-пакете. Я настроил webpack для объединения всех js-файлов и использования его в html-файле в качестве попытки изучить es6.

Теперь у меня есть функция в файле './app/index.js'

export function oops() {
  console.log("oops");
}

в файле index.js. Моя конфигурация веб-пакета выглядит так

var webpack = require('webpack');

const path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules|dist/,
        loader: "babel-loader"
      }
    ]
  }
};

Если попытаться получить доступ к методу oops() в событии нажатия кнопки

<input type="button" value="Submit" onClick="oops()"/>

браузер выдает ошибку

Uncaught ReferenceError: упс не определен.

Сам не мог понять, почему так. Я нашел это позже здесь

И это в файле index.js

window.oops = function(){
  console.log("oops");
};

Работает. Есть ли другой способ сделать это? А также почему веб-пакет не позволяет получить доступ к методам, определенным снаружи?