項目中有一個需求:
所有頁面引用了一個公共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個配置缺一不可.多次嘗試后發現的.