Webpack Using Node_modules In Vendor Chunk Without Explicitly Stating Them

So code splitting is the technique of creating different bundles - so app, vendor etc... I know what I want in my vendor bundle but only by convention... Anything import x from 'na

Solution 1:

What you can do is this:

const pkg = require('./package.json');

and in your configuration:

{
   entry: {
      vendor: Object.keys(pkg.dependencies) // use node_module dependencies
   },
   plugins: [
     new webpack.optimize.CommonsChunkPlugin({
        name: "vendor"
     })
   ]
}

EDIT: It seems there is a better way to do it. One can use minChunks property in the CommonsChunkPlugin plugin. You can pass a function there, as such:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: ({ resource }) => {
            return resource && resource.match(/\.js$/) && resource.indexOf('node_modules') >= 0;
        }
    })
]

By doing that, you don't need to rely on package.json list and webpack will consider only dependencies used in the project. neat.