title: Webpack: require.ensure and extra vendor bundle
body: <p>My website has two kind of pages:</p>
  
  <p>Pages where javascript widgets are the main content of the page (TypeA) and where widgets are some additional content, that user might to trigger (TypeB).</p>
  
  <p>So I'd like to split my JS codebase into three bundles:</p>
  
  <ul>
  <li><code>vendor.js</code> -- which is included on all pages</li>
  <li><code>runtime.js</code> -- for widgets</li>
  <li>specific entry points for different pages</li>
  </ul>
  
  <p>For TypeA-pages I have this:</p>
  
  <pre><code>&lt;script src="vendor.js"&gt;&lt;/script&gt;
  &lt;script src="runtime.js"&gt;&lt;/script&gt;
  &lt;script src="pageA.js"&gt;&lt;/script&gt;
  &lt;!-- pageA.js launches the widget --&gt;
  </code></pre>
  
  <p>But for TypeB I want this:</p>
  
  <pre><code>&lt;script src="vendor.js"&gt;&lt;/script&gt;
  &lt;scriprt&gt;
    &lt;!-- pseudo code --&gt;
    when('user clicks button', function() {
      require.ensure('pageB.js', function(require) {
          var pageBCode = require('pageB.js');
          &lt;!-- do the magic --&gt;
          &lt;!-- but I also need runtime.js here --&gt;
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is, that I want to reuse <code>runtime.js</code> in both <em>sync</em> and <em>async</em> pages. But I can't figure out <strong>how to load <code>runtime.js</code> along with my on-demand loading <code>pageB.js</code></strong>. I still have to include it via <code>&lt;script src="runtime.js"&gt;&lt;/script&gt;</code>.</p>
  
  <p>(I use <code>CommonChunksPlugin</code> for creating <code>vendor.js</code> and <code>runtime.js</code>, and it works well on TypeA pages)</p>