最近这个项目中有很多关于webpack的配置,之前对webpack有一些了解,但是不怎么什么,这次正好用到,那就作为自己的日志,记录一下,方便日后自己查看,希望也可以帮助的其他要了解相关知识的朋友. 项目中的代码
config .optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' }, elementUI: { name: 'chunk-elementUI', priority: 20, test: /[\\/]node_modules[\\/]_?element-ui(.*)/ }, commons: { name: 'chunk-commons', test: resolve('src/components'), minChunks: 3, // r priority: 5, reuseExistingChunk: true } } })下面是一些参数及含义:
chunks:表示显示块的范围,有三个可选值:initial(初始块)/async(按需加载块),all(全部块),默认为all;cacheGroups:缓存组minSize:表示压缩前的最小模块大小,默认为0;maxChunks:表示被引用次数,默认为1;maxAsyncRequests:最大的按需(异步)加载次数,默认为1;maxInitialRequests:最大的初始化加载次数,默认为1;name:拆分出来块的名字(Chunk Names),默认由块名和hash值自动生成;priority: 表示缓存的优先级；test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；reuseExistingChunk: 表示可以使用已经存在的块，即如果满足条件的块已经存在就使用已有的，不再创建一个新的块。