Splitting vendor code from application code so the vendor bundle can be cached separately is the most common webpack requirement and, this year, the one with the worst ergonomics.
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: (module) => /node_modules/.test(module.context)
}),
// and a second one, for the webpack runtime itself,
// or the vendor hash changes on every application build
new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' })
]The second plugin instance is the part everyone misses, and without it the vendor chunk’s hash changes whenever any application module does — which defeats the caching the split existed for. It is replaced by splitChunks in webpack 4, which does the right thing by default; until then this incantation is worth copying rather than deriving.