title: Webpack: how to bundle entries to multiple common chunks with CommonsChunkPlugin?
body: <p>Say I have two pages <code>Page1</code> and <code>Page2</code>, both of them use some library(vendors) like <code>jquery</code> <code>backbone</code> which I want to be extracted as a single file, then I want the shared modules(exclude the vendors) to be extracted in another single file, this is the webpack config:</p>
  
  <pre><code>function listFiles(srcpath) {
      return fs.readdirSync(srcpath).filter(function (file) {
          return fs.statSync(path.join(srcpath, file)).isDirectory();
      });
  }
  var createEntry = function (src) {
      var dest = {
          vendor: ["backbone", "underscore"]
      };
      var files = listFiles(src);
      files.forEach(function (dir) {
          var name = dir;
          dest[name] = src + "/" + dir + "/entry.js";
      });
      return dest;
  };
  
  //each sub directory contains a `entry.js` as the entry point for the page
  var entries = createEntry("./app/pages");//    {vender:['jquery','backbone'],page1:'src/page1/entry.js',page2:'src/page2/entry.js'    }
  
  var config = {
      resolve: {
          root: path.resolve('./app/'),
          extensions: ['', '.js']
      },
  
      plugins: [
          new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
          new webpack.optimize.CommonsChunkPlugin({
              name: 'common',
              filename: 'common.js',
              minChunks: 2
          })
      ],
      entry: entries,
      output: {
          path: './../main/webapp/static/dist',
          filename: '[name].js',
          publicPath: '/static/dist'
      }
  };
  module.exports = config;
  </code></pre>
  
  <p>However with the above config:</p>
  
  <p><code>common.js</code> contains webpack runtime,</p>
  
  <p><code>page1.js</code>  contains page1 specified modules  and shared modules</p>
  
  <p><code>page2.js</code>  contains page2 specified modules  and shared modules</p>
  
  <p>Which means <code>page1.js</code> and <code>page2.js</code> contains too many repeat codes.</p>
  
  <p>Then I tried to change the config:</p>
  
  <pre><code>var entries = createEntry("./app/pages");
  var chunks = [];
  for (var k in entries) {
      if (k === 'vendor')
          continue;
      chunks.push(k);
  }
  
  
  new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
  new webpack.optimize.CommonsChunkPlugin({
      name: 'common',
      filename: 'common.js',
      minChunks: 2,
      chunks:chunks
  }),
  </code></pre>
  
  <p>Then</p>
  
  <p><code>common.js</code> contains the webpack runtime and the vendor libraries, and the shared modules</p>
  
  <p><code>vendor.js</code> contains the webpack runtime and the vendor libraries.</p>
  
  <p><code>page1.js</code>  contains page1 specified modules</p>
  
  <p><code>page2.js</code>  contains page2 specified modules</p>
  
  <p>It seems it get closer, but the <code>common.js</code> should not contain the vendors</p>
  
  <p>Anything wrong?</p>