Webpack 2 duplicating modules across bundles?

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

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.