項目中有一個需求:webpack
全部頁面引用了一個公共ad.js 由於廣告須要不斷投放新渠道,因此ad.js須要常常上線更新,這樣會致使打包出來的web
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個配置缺一不可.屢次嘗試後發現的.