Why html file doesn't see function in bundle.js?

Question

Begin work with webpack and stack. My generated html file consist string with event onclick. But my html file doest't see function in generated file bundle.js. Bundle js file conected successfully(console.log works). But if i write <script>function bar()...</script> in html, onclick work. Help. Try connect file in head, beggining body, end of body/file - doesn't see function. Bundle.js generated from main.js:

require("path to css...");
function bar(){...};

String in html:

<div class="foo" onclick="bar()">...</div>

Bundle.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: "./src/main.js",
    output: {
    path: "dist",
    filename: "bundle.js"
},

module: {
    loaders: [
    {
        test: /\.js$/,
        loader: "babel-loader",
        options: { presets: ["es2015"] }
     ,
    {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style','css')
    },
    {
        test: /\.jade$/,
        loader: "jade"
    }]
},
plugins: [
    new ExtractTextPlugin("main.css"),
    new HtmlWebpackPlugin({
        template: './src/jade/index.jade'
    })
]
};

Answer 1

That's because you don't export your function. One of the main benefits of WebPack is that functions aren't put on global scope by default. Add export default to your declaration:

export default function bar(){...};

Answer 2

With webpack, you must explicitly put names in the global namespace. There are probably many ways to do this, but the easiest is to use the browser's window object:

window.bar = function(){...};

or

function bar(){...};
window.bar = bar;