title: Accessing webpack bundled libraries in the browser
body: <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>