How to access the code in client side from the bundle produced by webpack

Question

I am very new to webpack. I configured webpack to bundle all js files and using it in an html file as an attempt to learn es6.

Now i have a function in './app/index.js' file

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

in a file index.js. My webpack config looks like

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"
      }
    ]
  }
};

If try to access to access the method oops() in a button click event

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

the browser throws the error,

Uncaught ReferenceError: oops is not defined.

I could not figure out myself why is it like this. I found this later here

And this in index.js file

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

Is working. Is there any other way to do it? And also why is it webpack is not allowing to access the methods defined it outside?