title: Webpack main javascript file's functions not accessible in js files loaded in footer
body: <p>I have a function that I wrote to be included on all pages that will provide a CSRF token to all <code>POST</code> headers.  Since I want it on all pages, I included it in my common.js file that is created by webpack and loaded in the head of the page. </p>
  
  <pre><code>function setupAjaxCsrfToken(){
      var csrf_token = $('meta[name="csrf-token"]').attr('content');
      $.ajaxPrefilter(function(options, originalOptions, jqXHR){
          if (options['type'].toLowerCase() === "post") {
              jqXHR.setRequestHeader('X-CSRFToken', csrf_token);
          }
      });
  }
  </code></pre>
  
  <p>I originally wanted this to be a IIFE but since my posts are in other files, I decided to just call it at the top of the js file where the posts are (Maybe it should work and it's the same issue as I'm about to describe).  The file I'm calling this function from is loaded in the footer of the page, so that the other js file can load first.  But when the function gets called, I get a function is not defined error.   I've also tried this using a named function expression, with the same result (function is not defined).  My original thought was that it might have been a race condition and that the function is not getting defined until after it is called, but I tried using <code>let</code> declaration and didn't see a change in the error output so I figured it wasn't getting hoisted.  A little fuzzy on how function hoisting works so maybe I'm off there.  My next thought is that webpack is closing off the scope, making functions within the common.js inaccessible to other files.  How can you make functions in the main js file that is webpacked accessible to other filse?</p>