title: Declaring global helper functions and understand the namespace when using laravel-mix / webpack
body: <p>I am totally new to webpack (i previously built my apps by including tons of css / js files by "hand") and am now trying to understand how namespaces work when working with the named tools.</p>
  
  <p>i have an app.js</p>
  
  <pre><code>require('./bootstrap');
  
  require('./helperFunctions');
  
  /* ... more, unrelated stuff */
  </code></pre>
  
  <p>webpack.mix.js is untouched from the original file delivered with the laravel 5.5 sample project</p>
  
  <pre><code>let mix = require('laravel-mix');
  
  mix.js('resources/assets/js/app.js', 'public/js')
      .sass('resources/assets/sass/app.scss', 'public/css');
  </code></pre>
  
  <p>my helperFunctions.js is a simple js file with some helpful functions i want to use throughout my project:</p>
  
  <pre><code>function foo_bar(A, B) {
      return A - B;
  }
  
  /* more functions, following the same structure... */
  </code></pre>
  
  <p>but everytime i try to use one of the functions defined in the helperFunctions file i find that they are "undefined", even in the app.js file directly after the 'require' happens. </p>
  
  <p>after inspecting the generated app.js file i found that my functions are encapsulated in an anonymous function <code>function(module, exports) { /* my File contents go here */ }</code>, resulting in them being unavailable to the rest of the scripts.</p>
  
  <p>while i understand that this is propably there to reduce polluting the global namespace, i dont understand how i am supposed to define global objects (such as data Storage objects for vue) or functions such as helper functions.</p>
  
  <p>can anybody explain how this is supposed to work, or link me to a ressource explaining this for someone who never worked with an asset compiler (if this is even the right terminus).</p>
  
  <p>cheers</p>
  
  <p>// Edit: i think i found a solution, after stumbling over this:
  <a href="https://nodejs.org/api/modules.html#modules_modules" rel="nofollow noreferrer">https://nodejs.org/api/modules.html#modules_modules</a></p>
  
  <p>I editted the helper functions file to something like this:</p>
  
  <pre><code>module.exports = {
      foo_bar(A, B) {
          return (A - B);
      },
  
      /* ... more functions ... */
  }
  </code></pre>
  
  <p>And imported it wherever i need it like this:</p>
  
  <pre><code>import HelperFunctions from './helperFunctions'
  
  var result = HelperFunctions.foo_bar(5, 8);
  </code></pre>
  
  <p>However, this only works in files which are pre packed using webpack. is registering the component under window.HelperFunctions the only way to make them available in dynamically generated <code>&lt;script&gt;&lt;/script&gt;</code> tags throughout the website?</p>