webpack4 公共模块打包,怎么抽取出来一个需要经常修改的包
项目中有一个需求:
所有页面引用了一个公共ad.js 因为广告需要不断投放新渠道,所以ad.js需要经常上线更新,这样会导致打包出来的
commons.js经常更新,缓存一下无效了.所以急需将ad.js抽取出来,自己打包成一个JS
现在入口定义
entry['ad'] = path.resolve(dirlets.libsDir, 'ad.channel.js')
插件代码设置为:
new webpack.optimize.SplitChunksPlugin({ chunks: 'all', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '-', name: true, cacheGroups: { 'ad': { name: 'ad', test: path.resolve(dirlets.libsDir, 'ad.channel.js'), minChunks: 8, maxInitialRequests: 5, minSize: 0, priority: 2, }, commons: { name: 'commons', minChunks: 8, maxInitialRequests: 5, minSize: 0, priority: 1, }, } }),
test设置很重要:可以设置正则,字符串,用来将匹配到的文件打包出来.
可以参考这个链接.https://juejin.im/post/5af15e895188256715479a9a
priority这个设置是我不断尝试后发现的.
如果不设置这个属性的话,后边commons打包的JS会包含ad chunk打包出来的包.这样就重复无意义了.
但是将commons的priority优先级设置比ad的priority数值低的话.打包出来的就不会包含了.
以上2个配置缺一不可.多次尝试后发现的.
不自见,故明;不自是,故彰;不自伐,故有功;不自矜;故长;夫唯不争,故天下莫能与之争。