Webpack 2 duplicating modules across bundles? - webpack-2

Question

I'm new to Webpack 2. When my bundles are created, some modules are duplicated across bundles. Here's my webpack config:
module.exports = {
node: {
fs: "empty"
},
context: __dirname,
entry: {
"vendor": "./src/vendor-bundle-config.ts",
"app" : "./src/app/app.module"
},
output: {
filename: '[name].js',
path: './'
}
}
and my vendor-bundle-config:
// Angular
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/http';
import '#angular/router';
// RxJS
import 'rxjs';
No matter what I do, rxjs (and maybe other modules, I haven't checked further) is duplicated across both bundles. The odd thing is that I'm testing this all out with a very basic Angular project - it has the AppComponent and that's it. The only place rxjs is referenced currently is in package.json and vendor-bundle-config
I've tried configuring the CommonsChunkPlugin but it didn't seem to do anything. I'm not sure if that's something that I should look into further.
EDIT: Here's the config for the CommonsChunkPlugin as best I can recall it:
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.js",
})
This is from the webpack documentation example.
What am I missing/doing wrong?
Thanks.

Answer 1

Figured it out. I was missing the minChunks option in my CommonsChunkPlugin configuration. It needs to look like this to work:
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.js",
minChunks: 2 <-- this is what I was missing
})

Answer 2

The plugin's name option is the chunk's name you want to separate from entries.So,change it to vendor. See the code splitting for more details.