本文主要介绍了利用splitChunk来分割第三方库的代码，详细介绍了chunks三个属性值的具体含义，推荐使用'all'。最后，利用cacheGroups来对单个库进行打包。

前言 Vue项目开发一直使用的脚手架，对Webpack这个黑匣子知之甚少，碰到问题总是一头雾水，所以趁着Webpack5.0发布不久，较完整地学习了一遍。本篇文章总结一下学习成果。整体大纲如下： 认识

在webpack4之前，提取公共代码都是通过一个叫CommonsChunkPlugin的插件来办到的。到了4以后，内置了一个一模一样的功能，而且起了一个好听的名字叫“优化” 好了，就写到这里吧，想必大家也看累了吧，辛苦大家了，哈哈。

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南，在文档层面上还有所欠缺，大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章，官网上也有…

webpack4之前，大家一直都是用CommonsChunkPlugin来做代码切割。那用他具体有什么坑呢？ 我用起来感觉最诡异的点就是每次切割之后，新生成的chunk会和被提取的chunk生成一种父子关系(生成的公共chunk为entry chunk,之前有写过一篇文章介绍)…