title: How to expose a js variable in global scope with laravel mix (webpack)?
body: <p>I am using <code>Laravel 5.4</code>'s <code>mix</code> tool to build and combine my <code>AngularJS 1</code> files. Here's my <code>webpack.mix.js</code> for Laravel:</p>
  
  <pre><code>mix.js('resources/assets/js/app.js', 'public/js/app.js');
  mix.combine('resources/assets/js/directives/*', 'public/js/directives.js');
  </code></pre>
  
  <p>Here is the app defination:</p>
  
  <pre><code>'use strict';
  
  var myApp = angular.module('myApp', [
      'ngRoute',
      //...
  ]);
  </code></pre>
  
  <p>and here is a directive</p>
  
  <pre><code>myApp.directive('navigation', function () {
      return {
          templateUrl: 'app/modules/layouts/nav.html',
          replace: true
      };
  });
  </code></pre>
  
  <p>The problem is when I build the files and includes them on html I get the error </p>
  
  <pre><code>ReferenceError: myApp is not defined
  </code></pre>
  
  <p>from the compiled <code>diretives.js</code> file.</p>
  
  <p>I figure out that as <code>mix</code> uses <code>webpack</code> for compiling, and <code>webpack</code> enclose each js file's content in a anonymous function so my <code>myApp</code> variable is only accessible in the compiled <code>app.js</code> file, not in the global scope. When I manually remove the anonymous function from compiled <code>app.js</code> file it works just fine.</p>
  
  <p>So I was wondering if there is a way to make the <code>myApp</code> variable globally accessible though <code>Laravel</code>'s <code>mix</code> configuration?</p>