title: Webpack ProvidePlugin global variable (Cannot find module)
body: <p>I'm pretty new to Webpack, but can't figure out why my ProvidePlugin call is not working as expected.</p>
  
  <p>I have the following file:</p>
  
  <h2>App.js</h2>
  
  <pre class="lang-js prettyprint-override"><code>var App = function() {
      getSomething: function(size) {}
  }();
  
  module.exports = App;
  </code></pre>
  
  <p>I want this 'App' variable to be globally accessible because other files use it like this:</p>
  
  <h2>Layout.js</h2>
  
  <pre class="lang-js prettyprint-override"><code>var Layout = function () {
      App.getSomething('md');
  }();
  </code></pre>
  
  <h2>webpack.config.js</h2>
  
  <p>In webpack.config.js I have the following line:</p>
  
  <pre class="lang-js prettyprint-override"><code>new webpack.ProvidePlugin({ App: 'app' })
  </code></pre>
  
  <p>This is my entry:</p>
  
  <pre class="lang-js prettyprint-override"><code>entry: {
      'app': './angularApp/metronicapp.ts',
  }
  </code></pre>
  
  <h2>metronicapp.ts</h2>
  
  <pre class="lang-js prettyprint-override">import './metronic/global/scripts/app';</pre>
  
  <p>Where <code>app</code> is my <code>app.js</code> which is displayed above.</p>
  
  <p>I get the following error in the browser: 
  <strong><code>Cannot find module "app"</code></strong></p>
  
  <p>And when I compile webpack in the console:
  <strong><code>Module not found: Error: Can't resolve 'app'</code></strong></p>
  
  <p>I can't figure what I'm missing. Is my app.js not in the correct format? Why is <code>App</code> still not available globally?</p>