Accessing webpack bundled libraries in the browser : <p>I'm having trouble accessing a webpack bundled library from the browser. </p>

<p>Example: I have a class <code>Foo</code></p>

<pre><code>// foo.js

"use strict";

export default class Foo {
  constructor() {
    var bar = "bar";
  }
}
</code></pre>

<p><code>Foo</code> is imported in <code>src.js</code></p>

<pre><code>// src.js

"use strict";
import Foo from "./foo.js";
</code></pre>

<p>The webpack config looks like this. The entry is <code>src.js</code> and the output file is <code>bundle.js</code>.</p>

<pre><code>// webpack.config.js

module.exports = {
  entry: './src.js',
  output: {
    path: '.',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015']
        }
      },
    ]
  },
};
</code></pre>

<p>Webpack compiles everything okay, and I'm able to load it into my HTML file.</p>

<pre><code>&lt;!-- index.html --&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;script src="bundle.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    var x = new Foo();
    console.log(x);
  &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>it's at this point that I'm getting the error. For some reason, the bundled JS doesn't put the <code>Foo</code> class into a namespace the browser is able to access.</p>

<p>This is the error I get in Firefox:</p>

<p><code>ReferenceError: Foo is not defined[Learn More]</code></p>

<p>There's some configuration in WebPack I'm not grokking, I'm sure of it, but I've so far not been able to figure it out.</p>
