webpack expose object as global
<p>I have a coffeeScript file 'app.coffee' </p>

<pre><code>root = exports ? this

class DefipsyApplication extends Marionette.Application
  user_is_superuser: () -&gt;
    app_config.is_superuser

app = new DefipsyApplication

app.addRegions {
  modalRegion: '#modal-region'
}

unless root.App
  root.App = app
</code></pre>

<p>I want to expose the App function in the browser</p>

<p>so here is my webpack config</p>

<pre><code>module.exports = {
    entry: {
        app: './coffee/app.coffee',
    },
    output: {
        path: './build/',
        filename: '[name].bundle.js',
        libraryTarget: "var",
        library: ["MyProject", "[name]"],
    },
    module: {
        loaders: [
            { test: './coffee/app.coffee', loaders: ['expose?App', 'coffee'] },
        ]
    },
};
</code></pre>

<p>SO whene I test in browser I found that webpack was exposed my object to the browser, but this object is englobed by an other Object</p>

<p>so to call my method I should do</p>

<pre><code>App.App
</code></pre>

<p>I Want to expose my function without this global var
I need to access directely with </p>

<pre><code>App
</code></pre>

<p>here is a scree to show the object structur</p>

<p><a href="https://i.stack.imgur.com/N0kbQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N0kbQ.png" alt="enter image description here"></a></p>