title: Dynamically load/import split vendor chunks/bundles via Webpack
body: <p>I have a simple sample application that is structured thusly:</p>
  
  <pre><code>/dist
      index.html
      app.bundle.js
      moduleA.bundle.js
      moduleB.bundle.js
      vendors~app~moduleA~moduleB.bundle.js
      [...sourcemaps]
  /node_modules
      [...]
  /src
      index.js
      moduleA.js
      moduleB.js
  package.json
  webpack.config.js
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Test Dependency Pulls&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript" src="app.bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>src/index.js</p>
  
  <pre><code>import _ from 'Lodash';
  import printA from './moduleA.js';
  import printB from './moduleB.js';
  
  function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button');
  
    element.innerHTML = _.join(['Hello', 'webpack', '4'], ' ');
  
    btn.innerHTML = 'printA. Click me and check the console.';
    btn.onclick = printA;
    element.appendChild(btn); 
  
    btn = document.createelement('button');
    btn.innerHTML = 'printB. Click me and check the console.';
    btn.onclick = printB;
    element.appendChild(btn); 
  
    return element;
  }
  
  document.body.appendChild(component());
  </code></pre>
  
  <p>src/moduleA.js</p>
  
  <pre><code>import printB from './moduleB.js';
  
  export default function printA() {
    console.log('AAA I get called from moduleA.js!');
  }
  </code></pre>
  
  <p>src/moduleB.js</p>
  
  <pre><code>import _ from 'Lodash';
  
  export default function printB() {
    console.log('BBB I get called from moduleB.js!');
  }
  </code></pre>
  
  <p>/webpack.config.js</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: {
      app: './src/index.js',
      moduleA: './src/moduleA.js',
      moduleB: './src/moduleB.js',
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
  </code></pre>
  
  <p>When I pull in app.bundle.js, I expect the vendor bundle to be auto-pulled as well, since it is a dependency for app.js. Currently, this is not happening - the vendor bundle is not loaded.  I'm not even seeing an attempt in the network tab.</p>
  
  <p>How do I tell webpack to automatically load dependencies of a bundle?</p>