title: Webpack with two common chunks: one exported, one local
body: <p>I would like to use Webpack in a multi-page application in such a way that some pre-determined dependencies are bundled into a "vendor" chunk and the rest of the dependencies is bundled into a "commons" chunk.</p>
  
  <p>For example, assuming two entry points (effectively representing a different page each), <code>pageA.js</code> and <code>pageB.js</code> contain both this code (in EC6, processed via Babel), followed by their own code:</p>
  
  <pre><code>import $ from 'jquery';
  require('bootstrap/dist/css/bootstrap.css');
  import angular from 'angular';
  import uitree from 'angular-ui-tree';
  </code></pre>
  
  <p>I'd like jQuery and Bootstrap to be bundled into a "vendor" chunk, and the rest (whatever that is) to be bundled into a "commons" chunk.</p>
  
  <p>The objectives are:</p>
  
  <ul>
  <li>I would like to be able to have another separate build that would be able to rely on that same vendor chunk, without it needing to re-include the vendor libraries (I would explicitly declare that set of vendor libraries, to make it available to any sub-build that needs it).</li>
  <li>I would also like not to have to re-process the vendor chunk every time I make a change to a page's script.</li>
  </ul>
  
  <p>Here is the configuration I've tried:</p>
  
  <pre><code>module.exports = {
      entry : {
          "vendor" : [ "jquery", "bootstrap" ],
          "pageA" : "./src/pageA.js",
          "pageB" : "./src/pageB.js"
      },
      output : {
          path : path.join(__dirname, "./dest"),
          filename : "[name].chunk.js"
      },
      module : {
          loaders : [ {
              test : /bootstrap\/js\//,
              loader : 'imports?jQuery=jquery'
          },
          /* ... Some modules for angular and CSS processing ... */
  
          {
              test : /\.js?$/,
              include : [ path.resolve(__dirname, "./src") ],
              loader : 'babel',
              query : {
                  presets : [ 'es2015' ]
              }
          }
          /* ... Some other settings for the fonts ... */ ]
      },
      plugins : [
          new webpack.ProvidePlugin({
              $ : "jquery",
              jQuery : "jquery"
          }),
          new webpack.optimize.UglifyJsPlugin({
              sourceMap : false,
              mangle : false,
              compress : false
          }),
          new CommonsChunkPlugin({
              name : "vendor",
              minChunks : Infinity
          }),
          new CommonsChunkPlugin({
              name : "commons",
              minChunks : 2
          })
      ]
  };
  </code></pre>
  
  <p>With the configuration above, I get jQuery and Bootstrap in <code>vendor.chunk.js</code>, as required, but the <code>commons.chunk.js</code> file is almost empty, all the rest of what's commonly used by <code>pageA.js</code> and <code>pageB.js</code> is then put into <code>pageA.chunk.js</code> and <code>pageB.chunk.js</code> (effectively duplicating that code).</p>
  
  <p>If I swap the order of the last two plugins, <code>commons.chunk.js</code> now contains almost everything (unless what's actually specific to <code>pageA.js</code> and <code>pageB.js</code>), and <code>vendor.chunk.js</code> is almost empty:</p>
  
  <pre><code>plugins : [
      // ...,
      new CommonsChunkPlugin({
          name : "commons",
          minChunks : 2
      }),
      new CommonsChunkPlugin({
          name : "vendor",
          minChunks : Infinity
      })
  ]
  </code></pre>
  
  <p>Is there a way to bundle a pre-defined list of libraries (e.g. <code>[ "jquery", "jquery-ui", "bootstrap" ]</code> into one particular chunk (in such a way that it can be used by completely independent scripts) and also have another common chunk for whatever else is in commonly used between the entry points?</p>
  
  <p>The aim of all this would be to be able to build a completely separate piece of code for another page later, and tell it it doesn't need to re-bundle those pre-defined libraries.</p>
  
  <p>Here is a diagram representing what I'm trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/2CNQb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2CNQb.png" alt="Dependencies Diagram"></a></p>
  
  <p>I would then use the generated scripts as follows on page A:</p>
  
  <pre><code>&lt;script src="vendor.js"&gt;&lt;/script&gt;
  &lt;script src="common.js"&gt;&lt;/script&gt;
  &lt;script src="pageA.chunk.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And on page C (built completely independently from pages A and B):</p>
  
  <pre><code>&lt;script src="vendor.js"&gt;&lt;/script&gt;
  &lt;script src="common2.js"&gt;&lt;/script&gt;
  &lt;script src="pageC.chunk.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>(I am using Webpack 1.12.14.)</p>
  
  <hr>
  
  <p>I have tried the solution suggested in <a href="https://stackoverflow.com/a/35775596/372643">the only answer so far</a>. While this makes it indeed possible to separate the vendor chunk from the commons chunk, the vendor chunks (with the same definition) made from two separate builds generally cannot be swapped between each other. This does not make it possible to use only one of those vendor chunks across two builds (even though they are virtually the same).</p>