title: Apply CommonsChunkPlugin on different config exports in Webpack?
body: <p>I am working on a project which is consisting of the following 'entities':</p>
  
  <ul>
  <li>A few pages for a static website</li>
  <li>An app</li>
  <li>An admin dashboard</li>
  </ul>
  
  <p>In my initial <code>webpack.config</code> a setup I was handling each of these entities as different <code>entry</code> points. For example, I would have something like </p>
  
  <pre><code>entry: {
      vendor: [
          'jquery',
          'bootstrap',
          'bootstrap/dist/css/bootstrap.css'
      ],
      admin: [
          'admin.js',
          'admin.css'
      ],
      websitePageA: [
          'analytics.js',
          'websitePageA.js',
          'websitePageA.css'
      ],
      websitePageB: [
          'analytics.js',
          'websitePageB.js',
          'websitePageB.css'
      ],
      websitePageC: [
          'analytics.js',
          'websitePageC.js',
          'websitePageC.css'
      ],
      app: [
          'analytics.js',
          'app.js',
          'app.css'
      ]
  }
  </code></pre>
  
  <p>When I would apply the <code>CommonsChunkPlugin</code> I would do so in such a way to try and separate my own common files (for example the <code>analytics.js</code> from above) into their own <code>common</code> bundle and vendor common files (such as <code>jquery</code>) into their own <code>vendor</code> bundle. </p>
  
  <p>This worked, however, semantically, I was not happy with the result because while I was making a <code>vendor</code> bundle which supposedly should include <em>every</em> vendor file, I was not doing that. Not every page needed every vendor file required by various pages, so I was optimizing in a way that my <code>vendor</code> bundle would only include <em>common</em> vendor files between these entry points.</p>
  
  <p>After consideration, I decided that the best course of action would be to break my configuration into 3, one for the app entity, one for the admin dashboard entity and one for the website as a whole.</p>
  
  <p>So I now have 4 <code>config</code> files, one for each of the above 3 entities and one main <code>webpack.config.js</code> which imports the 3 others and exports an array containing them.</p>
  
  <p>My <code>webpack.config.js</code> looks like this</p>
  
  <pre><code>'use strict';
  
  const appConfig = require('./webpack.config.app');
  const siteConfig = require('./webpack.config.site');
  const adminConfig = require('./webpack.config.admin');
  
  module.exports = [
      appConfig,
      siteConfig,
      adminConfig,
  ];
  </code></pre>
  
  <p>And the <code>entry</code> config of each respective sub-config looks like this:</p>
  
  <p>For the <strong>app</strong></p>
  
  <pre><code>entry = {
      vendor: [
          'jquery',
          'bootstrap',
          'bootstrap/dist/css/bootstrap.css',
           etc...
      ],
      main: [
          'analytics.js',
          'app.js',
          'app.css'
      ]
  };
  </code></pre>
  
  <p>For the <strong>site</strong></p>
  
  <pre><code>entry: {
      vendor: [
          'jquery',
          'bootstrap',
          'bootstrap/dist/css/bootstrap.css',
           etc...
      ],
      websitePageA: [
          'analytics.js',
          'websitePageA.js',
          'websitePageA.css'
      ],
      websitePageB: [
          'analytics.js',
          'websitePageB.js',
          'websitePageB.css'
      ],
      websitePageC: [
          'analytics.js',
          'websitePageC.js',
          'websitePageC.css'
      ]
  }
  </code></pre>
  
  <p>For the <strong>admin dashboard</strong></p>
  
  <pre><code>entry: {
      vendor: [
          'jquery',
          'bootstrap',
          'bootstrap/dist/css/bootstrap.css',
           etc...
      ],
      admin: [
          'admin.js',
          'admin.css'
      ]
  }
  </code></pre>
  
  <p>In each of the above configs, I run <code>CommonsChunkPlugin</code> in such a way that separates <strong>all</strong> vendor files into a <code>vendor</code> bundle and in the case of the site, <strong>all</strong> own common files into their own <code>common</code> bundle.</p>
  
  <p>I am also creating a separate <code>manifest</code> file for each of them, which includes just the webpack runtime.</p>
  
  <p>Each of these configs outputs in a specific directory in my <code>build/</code> directory. For example my app config outputs to <code>build/app/</code>, the website to <code>build/site</code> etc. <strong>The output paths are also used as the <code>publicURL</code> setting for each configuration, so that webpack knows where to pull code from, on code-splitting scenarios</strong></p>
  
  <h1>The question</h1>
  
  <p>As you may have noticed the <code>jquery</code> dependency is common among all the different configs. </p>
  
  <p>My question is, in my main <code>webpack.config.js</code> is it possible to apply <code>CommonsChunkPlugin</code> for the vendor files/bundles of each of the separate sub-configs?</p>
  
  <p>So that I can have one "super-global" <code>vendor</code> bundle that includes the common vendor files among all the entities? (app, admin dashboard, and website)</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I am attaching visualizations of the bundles generated by each of my configs to help you understand what I have:</p>
  
  <p>The bundles for the site
  <a href="https://i.stack.imgur.com/faGe5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/faGe5.png" alt="Site bundles"></a></p>
  
  <p>The bundles for the app
  <a href="https://i.stack.imgur.com/Dfxsp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dfxsp.png" alt="App bundles"></a></p>
  
  <p>The bundles for the admin panel
  <a href="https://i.stack.imgur.com/Cv3UK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cv3UK.png" alt="Site bundles"></a></p>
  
  <p>So, what I want to do, is have one more bundle, which moves all the instances where <code>jquery</code> and <code>bootstrap</code> is used into a new bundle, containing only them. That bundle would be shared amongst the app, the site and the admin panel, which now would not contain <code>jquery</code> and <code>bootstrap</code> in their respective vendor bundles.</p>