众所周知，以上都是分包插件。
1.CommonsChunkPlugin
大家都很常用的分包工具，原理就是：将指定的模块或者公用模块打包出来，减少主bundle文件的体积，配合缓存策略，加快应用访问速度。
如何使用？看得最多的应该是以下代码
new webpack.optimize.CommonsChunkPlugin({ // 这里的意思是将node_module中的模块抽离出来，成为vendor
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
// 判断三个条件：有在处理的模块，并且是js文件，并且这个文件是在node_modules中
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// // extract webpack runtime and module manifest to its own file in order to
// // prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({ // 这里是从vendor里面把runtime 这部分代码抽离出来，名字是manifest
name: 'manifest',
chunks: ['vendor'] // 这个属性的意思是通过 chunk name 去选择 chunks 的来源。chunk 必须是 公共chunk 的子模块，指定source chunk，即指定从哪些chunk当中去找公共模块，省略该选项的时候，默认就是entry chunks
// minChunks: Infinity // 这种写法和上面的写法效果一样，会马上生成公共chunk，但里面没有模块
}),
如上代码的注释，构建出来会发现多了vendor.js和manifest.js,其中vendor中是node_module中的三方库，manifest是基于vendor包继续抽取的公用包。
配合 HtmlWebpackPlugin 插件 我们可以自动引入对应包，但是要注意：manifest必须在vendor之前引入，毕竟前者是后者的公共部分
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunks: ['manifest', 'vendor', 'app'], // app是入口文件 chunksSortMode: 'dependency' }),
根据以上代码，会发现如果改动了业务代码，重新构建的vendor包的hash哈希值并没有变化，说明啥，说明就可以让第三依赖库实现了用户端和服务端持久缓存，每次上线更新只要部署app.js就好了。
这是因为咱们通过
new webpack.optimize.CommonsChunkPlugin({ // 这里是从vendor里面把runtime 这部分代码抽离出来，名字是manifest name: 'manifest', chunks: ['vendor'] // 这个属性的意思是通过 chunk name 去选择 chunks 的来源。chunk 必须是 公共chunk 的子模块，指定source chunk，即指定从哪些chunk当中去找公共模块，省略该选项的时候，默认就是entry chunks // minChunks: Infinity // 这种写法和上面的写法效果一样，会马上生成公共chunk，但里面没有模块 }),
这段代码，把vendor里面的webpack运行代码抽出来了，vendor就可以理解为静态资源咯。去掉这段，你会发现改动业务代码，vendor包的hash值会变化。
但是，如果在业务代码中删除和增加三方库依赖，vendor是会变化的，所以上线更新只要部署app.js是在你不会更新依赖的前提下。但很难保证这一点，那么dll来了
2.Dllplugin &DllReferencePlugin
众所周知，也是个分包插件
详细介绍看这里 https://juejin.im/entry/598bcbc76fb9a03c5754d211
结果就是：
我们使用 webpack 内置的 DllPlugin 和 DllReferencePlugin插件，通过这两个插件提前对这些公共模块进行独立编译，打出一个 vendor.dll.js 的包，之后在这部分代码没有改动的情况下不再对它们进行编译，所以项目平时的构建速度也会提升不少。vendor.dll.js 包独立存在，hash 不会发生变化，特别适合持久化缓存。
于是，我们的业务代码有变化时，只需要以新版号发布业务包（app.js）即可，vendor.dll.js 依然使用本地缓存。再配合上pwa，感觉瞬间就高端了呢
3.SplitChunksPlugin
众所周知，
webpack4中使用它，功能还是一样了
详情 ：https://segmentfault.com/a/1190000015938570
https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk