How to define entry point for webpack CommonsChunkPlugin?

Question

In my webpack config I have entry defined as like this -

entry: [
    'webpack-hot-middleware/client',
    './src/app.jsx'
  ],

I had realized that my bundle size getting generated as around 8 mb in size.

So I decided to split the vendor javascript files into separate chunks i.e bundle.vendor.js

I know that I have to use use CommonsChunkPlugin for this and change the entry to something like this

  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }

But can't figure out how to change my existing entry configuration for the same which is currently set as

entry: [
    'webpack-hot-middleware/client',
    './src/app.jsx'
  ],

Answer 1

1. You need to tell Webpack about your entry points, and in this case, you can define the vendors entry as an array of dependencies. Like this:

entry: {
   app: path.join(__dirname, 'path/to/app.jsx'), // prefer using absolute paths to avoid problems
   vendors: ['jquery', 'lodash']
}

2. You need to tell Webpack which of your entries should be optimized: Notice that you're passing a second string in the plugin's configuration "names". It's the name of another file that will be generated by Webpack. It will be responsible for telling the browser how to handle dependencies correctly and will be included before your app and vendors script tags.

plugins : [
   new webpack.optimize.CommonsChunkPlugin({
      names: ['vendors', 'manifest']
   })
]

If you need, I have a repo with a working example of this. The CommonsChunk part is in the prod configuration.