I get the general gist that the `CommonsChunkPlugin` looks at all the entry points, checks to see if there are common packages/dependencies between them and separates them into their own bundle.

So, let&#39;s assume I have the following configuration:

    ...
    enrty : {
        entry1 : &#39;entry1.js&#39;, //which has &#39;jquery&#39; as a dependency
        entry2 : &#39;entry2.js&#39;, //which has &#39;jquery as a dependency
        vendors : [
            &#39;jquery&#39;,
            &#39;some_jquery_plugin&#39; //which has &#39;jquery&#39; as a dependency
        ]
    },
    output: {
		path: PATHS.build,
		filename: &#39;[name].bundle.js&#39;
	}
    ...

## If I bundle without using `CommonsChunkPlugin`
I will end up with 3 new bundle files:

* `entry1.bundle.js` which contains the complete code from `entry1.js` and `jquery` and contains its own runtime
* `entry2.bundle.js` which contains the complete code from `entry2.js` and `jquery` and contains its own runtime
* `vendors.bundle.js` which contains the complete code from `jquery` and `some_jquery_plugin` and contains its own runtime

This is obviously bad because I will potentially load `jquery` 3 times in the page, so we don&#39;t want that.

## If I bundle using `CommonsChunkPlugin`

Depending on what arguments I pass to `CommonsChunkPlugin` any of the following will happen:

* **CASE 1 :** If I pass `{ name : &#39;commons&#39; }` I will end up with the following bundle files:

  * `entry1.bundle.js` which contains the complete code from `entry1.js`, a requirement for `jquery` and does not contain the runtime
  * `entry2.bundle.js` which contains the complete code from `entry2.js`, a requirement for `jquery` and does not contain the runtime
  * `vendors.bundle.js` which contains the complete code from `some_jquery_plugin`, a requirement for `jquery` and does not contain the runtime
  * `commons.bundle.js` which contains the complete code from `jquery` and contains the runtime

  This way we end up with some smaller bundles overall and the runtime is contained in the `commons` bundle. Pretty ok but not ideal.

* **CASE 2 :** If I pass `{ name : &#39;vendors&#39; }` I will end up with the following bundle files:

  * `entry1.bundle.js` which contains the complete code from `entry1.js`, a requirement for `jquery` and does not contain the runtime
  * `entry2.bundle.js` which contains the complete code from `entry2.js`, a requirement for `jquery` and does not contain the runtime
  * `vendors.bundle.js` which contains the complete code from `jquery` and `some_jquery_plugin` and contains the runtime. 

  This way, again, we end up with some smaller bundles overall but the runtime is now contained in the `vendors` bundle. It&#39;s a little worse than the previous case, since the runtime is now in the `vendors` bundle.

* **CASE 3 :** If I pass `{ names : [&#39;vendors&#39;, &#39;manifest&#39;] }` I will end up with the following bundle files:

  * `entry1.bundle.js` which contains the complete code from `entry1.js`, a requirement for `jquery` and does not contain the runtime
  * `entry2.bundle.js` which contains the complete code from `entry2.js`, a requirement for `jquery` and does not contain the runtime
  * `vendors.bundle.js` which contains the complete code from `jquery` and `some_jquery_plugin` and does not contain the runtime
  * `manifest.bundle.js` which contains requirements for every other bundle and contains the runtime

  This way we end up with some smaller bundles overall and the runtime is contained in the `manifest` bundle. This is the ideal case.

# What I do not understand/I am not sure I understand

* In **CASE 2** why did we end up with the `vendors` bundle containing both the common code (`jquery`) and whatever remained from the `vendors` entry (`some_jquery_plugin`)? From my understanding, what the `CommonsChunkPlugin` did here was that it gathered the common code (`jquery`), and since we forced it to output it to the `vendors` bundle, it kind of &quot;merged&quot; the common code into the `vendors` bundle (which now only contained the code from `some_jquery_plugin`). **Please confirm or explain.** 

* In **CASE 3** I do not understand what happened when we passed `{ names : [&#39;vendors&#39;, &#39;manifest&#39;] }` to the plugin. Why/how was the `vendors` bundle kept intact, containing both `jquery` and `some_jquery_plugin`, when `jquery` is clearly a common dependency, and why was the generated `manifest.bundle.js` file created the way it was created (requiring all other bundles and containing the runtime) ?


All Webpack Plugin Solutions on Gang of Coders

Total of 1 Webpack Plugin Solutions

Can someone explain Webpack's CommonsChunkPlugin