How to chunk vendors/libs into their own file in Webpack?

Question

How to use CommonsChunkPlugin to Chunk multiple vendors into their own chunk file?

I want to chunk each of the libraries separately into their own Chunk file, and effectively have,

1. commons.[chunkhash].js
2. react.[chunkhash].js
3. lodash.[chunkhash].js
4. bluebird.[chunkhash].js
5. app.[chunkhash].js

And when using OccurenceOrderPlugin make sure that however app code changes (or) irrespective of the number of times a module is required, it gets the same chunkhash for all the libraries which don't change.

Is it possible to prioritize or configure chunk ids someway ?

Answer 1

You could have a entry for each library and use CommonsChunkPlugin . Here's the rough idea:

module.exports = {
  entry: {
    ...
    react: 'react',
    lodash: 'lodash',
    ...
  },
  ...
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('react', 'react.[chunkhask].js'),
    ...
  ]
};

Something like that could work as a starting point for you. See also Split app and vendor code at official docs.