webpack4 公共模塊打包,怎麼抽取出來一個須要常常修改的包

項目中有一個需求: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個配置缺一不可.屢次嘗試後發現的.
相關文章
相關標籤/搜索