title: (Webpack) How to chunk dynamic module dependencies
body: <p>I just realized that if you load modules dynamically using <code>require.ensure()</code>, webpack will not analyze and chunk dependencies together. This makes sense in some way that one could argue, that webpack can't know if such modules are transferred ever, but can we force webpack to do the job anyway?</p>
  
  <p>Example is:</p>
  
  <p><strong>app.js</strong>:</p>
  
  <pre><code>require.ensure([ 'module1.js' ], ( require ) =&gt; {
      // at some point
      require( 'module1.js' );
  }, 'Module1');
  
  require.ensure([ 'module2.js' ], ( require ) =&gt; {
      // at some point
      require( 'module2.js' );
  }, 'Module2');
  </code></pre>
  
  <p><strong>module1.js</strong></p>
  
  <pre><code>let io = require( 'socket.io-client' );
  </code></pre>
  
  <p><strong>module2.js</strong></p>
  
  <pre><code>let io = require( 'socket.io-client' );
  </code></pre>
  
  <p>The outcome of this compilation is, that both of these modules get the whole socket-io library "linked" into their chunks. My original expectation was, that the <em>CommonsChunkPlugin</em> will catch those <code>requires</code> and put that big library into a common chunk.</p>
  
  <pre><code>new webpack.optimize.CommonsChunkPlugin( 'common' ),
  </code></pre>
  
  <p>Doesn't work however. Of course I could always "resolve" this dependency manually, but I hoped that webpack can do the trick somehow?</p>