title: Require modules from Webpack bundle inside HTML
body: <p>I'm migrating away from <a href="https://brunch.io/" rel="nofollow noreferrer">brunch</a> to Webpack (using Laravel Mix) and I'm trying to achieve the same workflow I was using before, which is basically:</p>
  
  <ul>
  <li>Having just two bundles for the whole application: <em>app.js</em> and <em>site.css</em></li>
  <li>Being able to require and load defined modules from HTML</li>
  </ul>
  
  <p>Consider the following hypothetical folder structure:</p>
  
  <pre><code>public/
  |-- dist/
  |   |-- site.js
  |   |-- site.css
  |-- javascripts/
  |   |-- application.ts
  |   |-- components/
  |   |   |-- dateTimePicker.ts
  |   |-- dashboard/
  |   |   |-- index.ts
  |-- stylesheets/
  |   |-- application.sass
  </code></pre>
  
  <p>For configuration, I'm using something along the lines of:</p>
  
  <pre><code>mix.setPublicPath('public');
  mix.ts('public/javascripts/application.ts', 'dist').sourceMaps();
  mix.sass('public/stylesheets/application.scss', 'dist');
  </code></pre>
  
  <p>And now, for each page I want to be able to just:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
    var module = require("dashboard/index");
    module.Init(); 
  &lt;/script&gt;
  </code></pre>
  
  <p>(This approach is something similar to what people used to do with Ruby on Rails and Sprockets and manifest files).</p>
  
  <p>Just to highlight, the goals are:</p>
  
  <ul>
  <li>Provide this single bundled/minified/compressed file so users will request it only once, ever!</li>
  <li>Load modules on demand for each page. Since I'm using an MPA with progressive enhancement, I just need to simply run some javascript per page. This is very convenient because I can pass parameters from my template engine (Razor) to that module before initializing it.</li>
  </ul>
  
  <p><strong>PS.:</strong> I may be wrong, but Brunch would not pollute the global namespace to expose modules.</p>