title: Webpack with small initial script and async loading of all other scripts
body: <p>I have started using Webpack when developing usual web sites consisting of a number pages and of different pages types. I'm used to the RequireJs script loader that loads all dependencies on demand when needed. Just a small piece of javascript is downloaded when page loads.</p>
  
  <p>What I want to achieve is this:</p>
  
  <ul>
  <li>A small initial javascript file that loads dependencies asynchronous</li>
  <li>Each page type can have their own javascript, which also may have dependencies.</li>
  <li>Common modules, vendor scripts should be bundled in common scripts</li>
  </ul>
  
  <p>I have tried many configurations to achieve this but with no success.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>entry: {
      main: 'main.js', //Used on all pages, e.g. mobile menu
      'standard-page': 'pages/standard-page.js',
      'start-page': 'pages/start-page.js',
      'vendor': ['jquery']
  },
  alias: {
      jquery: 'jquery/dist/jquery.js'
  },
  plugins: [
      new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js"),
      new webpack.optimize.CommonsChunkPlugin('common.js')
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the html I want to load the javascripts like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="/Static/js/dist/common.js"&gt;&lt;/script&gt;
  &lt;script src="/Static/js/dist/main.js" async&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And on a specific page type (start page)
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="/Static/js/dist/start-page.js" async&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>common.js should be a tiny file for fast loading of the page. main.js loads async and require('jquery') inside.</p>
  
  <p>The output from Webpack looks promising but I can't get the vendors bundle to load asynchronously. Other dependencies (my own modules and domReady) is loaded in ther autogenerated chunks, but not jquery.</p>
  
  <p>I can find plenty of examples that does almost this but not the important part of loading vendors asynchronously.</p>
  
  <p>Output from webpack build:</p>
  
  <pre><code>                  Asset       Size  Chunks             Chunk Names
              main.js.map  570 bytes    0, 7  [emitted]  main
                  main.js  399 bytes    0, 7  [emitted]  main
         standard-page.js  355 bytes    2, 7  [emitted]  standard-page
  c6ff6378688eba5a294f.js  348 bytes    3, 7  [emitted]
            start-page.js  361 bytes    4, 7  [emitted]  start-page
  8986b3741c0dddb9c762.js  387 bytes    5, 7  [emitted]
                vendor.js     257 kB    6, 7  [emitted]  vendor
                common.js    3.86 kB       7  [emitted]  common.js
  2876de041eaa501e23a2.js     1.3 kB    1, 7  [emitted]  
  </code></pre>