title: webpack2 code splitting and CommonsChunkPlugin
body: <p>I ran into a problem using code splitting and the CommonsChunkPlugin. I'm used to <code>require.js</code> where the files are cached automatically. I'm also using the <code>libraryTarget: 'amd'</code> for my webpack configuration.</p>
  
  <p>Considering these two simple files, this is the output I get:</p>
  
  <pre><code>// fileA.js
  import $ from 'jquery'
  
  // fileB.js
  import $ from 'jquery'
  
     Asset    Size  Chunks                    Chunk Names
  fileB.js  271 kB       0  [emitted]  [big]  fileB
  fileA.js  271 kB       1  [emitted]  [big]  fileA
  </code></pre>
  
  <p>So both files, <code>fileA</code> and <code>fileB</code> have <code>jquery</code> included. Also, I'm able to use these files like this in my <code>html</code> file.</p>
  
  <pre><code>require(['./dist/fileA.js', './dist/fileB.js'], function () {
  })
  </code></pre>
  
  <p>As per the docs I can use the <code>CommonsChunkPlugin</code> to basically extract jquery into its own file, so my config looks like this:</p>
  
  <pre><code>new webpack.optimize.CommonsChunkPlugin({
    name: 'common'
  }),
  </code></pre>
  
  <p>resulting in this output:</p>
  
  <pre><code>    Asset       Size  Chunks                    Chunk Names
   fileB.js  635 bytes       0  [emitted]         fileB
   fileA.js  617 bytes       1  [emitted]         fileA
  common.js     274 kB       2  [emitted]  [big]  common
  </code></pre>
  
  <p><strong>BUT</strong> now I'm unable to use the above <code>require</code> block, because the <code>common.js</code> also includes the webpack runtime. All I now get is an <code>Uncaught ReferenceError: webpackJsonp is not defined</code> error.</p>
  
  <p>So what I would need is:</p>
  
  <ol>
  <li>fileA.js (only contains "fileA" code, requiring jquery)</li>
  <li>fileB.js (only contains "fileB" code, requiring jquery)</li>
  <li>jquery.js (all of the jquery stuff)</li>
  <li>common.js (only contains the runtime for webpack)</li>
  </ol>
  
  <p>I already tried something like this for <code>fileA</code> and <code>fileB</code>, but it's basically the same output:</p>
  
  <pre><code>define(['jquery'], function ($) {
  
  })
  </code></pre>
  
  <p>A (Vendor) library should only be loaded, if a script (like <code>fileA</code>) is loaded and has it as a dependency (as it is with requirejs).</p>
  
  <p>Can this be accomplished? I skimmed through the webpack2 docs numerous times, but couldn't find anything that could help me...</p>
  
  <p>edit: Ok, with the help of some github issues, I managed to get the correct asset generation with the following configuration:</p>
  
  <pre><code>module.exports = {
    entry: {
      jquery: ['jquery'],
      vue: ['vue'],
      fileA: ['./src/fileA.js'],
      fileB: ['./src/fileB.js'],
      fileC: ['./src/fileC.js']
    },
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist',
      filename: '[name].js',
      libraryTarget: 'amd'
    }
  }
  
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vue', 'jquery']
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      chunks: ['vue', 'jquery'],
      minChunks: Infinity
    }),
    new webpack.optimize.OccurrenceOrderPlugin()
  ])
  </code></pre>
  
  <p>I changed the source files to:</p>
  
  <pre><code>// fileA.js
  import $ from 'jquery'
  import Vue from 'vue'
  // fileB.js
  import $ from 'jquery'
  // fileC.js
  import Vue from 'vue'
  </code></pre>
  
  <p>And this is the output:</p>
  
  <pre><code>   vue.js     193 kB       0  [emitted]         vue
   fileC.js  447 bytes       1  [emitted]         fileC
   fileB.js  579 bytes       2  [emitted]         fileB
   fileA.js  666 bytes       3  [emitted]         fileA
  jquery.js     269 kB       4  [emitted]  [big]  jquery
  common.js    5.78 kB       5  [emitted]         common
  </code></pre>
  
  <p>However, using it in an <code>.html</code> file like so results in the following error:</p>
  
  <pre><code>&lt;body&gt;
    &lt;script src="./dist/common.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      require(['./dist/fileA.js', './dist/fileB.js', './dist/fileC.js'], function (a, b, c) {
      })
    &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The following error occurs both for <code>fileA</code> and for <code>fileC</code>...</p>
  
  <pre><code>common.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
      at __webpack_require__ (common.js:55)
      at Object.7 (fileA.js:16)
      at __webpack_require__ (common.js:55)
      at Object.6 (fileA.js:6)
      at __webpack_require__ (common.js:55)
      at webpackJsonpCallback (common.js:26)
      at fileA.js:1
      at Object.execCb (require.js:1696)
      at Module.check (require.js:883)
      at Module.enable (require.js:1176)
  </code></pre>
  
  <p><strong>edit:</strong></p>
  
  <p>I've create a <a href="https://github.com/johannes-z/webpack-test" rel="nofollow noreferrer">repo on github</a> showing the problem I ran into. As per the answer of Rafael De Leon, I'm now using <code>System.import('&lt;module&gt;')</code> to asynchronously import other files. <code>main.ts</code> imports <code>fileA.ts</code> via this syntax, resulting in an error when <code>output.js</code> (the compiled <code>main.ts</code> file) is required. The error seems to happen when <code>fileA</code> is being loaded from withing <code>output.js</code>... I've also created a <a href="https://github.com/webpack/webpack/issues/5264" rel="nofollow noreferrer">github issue</a>, because I think it's a bug.</p>