需求！
打包后的文件自動(dòng)過(guò)濾出sourcemap并壓縮成zip包
項(xiàng)目結(jié)構(gòu)：
項(xiàng)目結(jié)構(gòu)圖
說(shuō)明
首先說(shuō)明一下為什么會(huì)有這樣的需求
因?yàn)轫?xiàng)目中集成了 sentry 關(guān)于sentry的介紹 請(qǐng)點(diǎn)擊我，
如果你已經(jīng)了解了 sentry
那么你會(huì)知道在sentry中我們需要上傳sourcemap來(lái)定位具體的源碼行，但是在實(shí)際生產(chǎn)中我們是不能上傳sourcemap的，這不僅僅是不安全的問(wèn)題。
所有我們會(huì)在配置中打開(kāi)sourcemap
module.exports = {
// ...
productionSourceMap: true,
// ...
}
打開(kāi)后就會(huì)在構(gòu)建后的文件中產(chǎn)生以.map為后綴的文件
image.png
我們可以結(jié)合
@sentry/webpack-plugin插件來(lái)實(shí)現(xiàn)自動(dòng)上傳sourcemap到sentry。更多相關(guān)信息請(qǐng)點(diǎn)擊我上面的一切都很順利，但是我要發(fā)布到生產(chǎn)環(huán)境不可能手動(dòng)去剔除
.map文件吧，于是我就想到用nodejs去處理這個(gè)問(wèn)題，
思路一 node
將文件拷貝一份，用遞歸遍歷，拷貝的過(guò)程中去掉.map文件然后壓縮文件
image.png
每次在
npm run build完成后跑一下相關(guān)任務(wù)
思路二 webpack插件
然后我突然意識(shí)到可能不需要這么復(fù)雜，是否有對(duì)應(yīng)的webpack插件就可以完成這個(gè)事情？
于是我找到了一個(gè)copy-webpack-plugin
相關(guān)配置
更多信息 請(qǐng)點(diǎn)擊我
看上去很美好一切需要的都有，but
實(shí)際是復(fù)制了一個(gè)空文件，然后我把dist改成其他文件就可以了。然后我發(fā)現(xiàn)是插件的執(zhí)行順序問(wèn)題
然后我又去看了一遍webpack插件的執(zhí)行鉤子，并看到該插件issue相關(guān)問(wèn)題討論
雖然我發(fā)現(xiàn)vuecli3在復(fù)制asses下的文件到dist目錄下也是使用的該插件，但是由于dist是在構(gòu)建以后才生產(chǎn)的，而插件是在這之前就開(kāi)始執(zhí)行了，所以是空目錄。
最終方案
當(dāng)我放棄這些抱著試一試的態(tài)度去找webpck的zip插件時(shí)有了意外的發(fā)現(xiàn)。
這就是我的最終實(shí)現(xiàn)方式 非常的簡(jiǎn)單 zip-webpack-plugin
new ZipPlugin({
path: path.join(__dirname, 'dist'),
filename: 'dist.zip',
exclude: [/\.map$/]
}),
更多說(shuō)明 請(qǐng)點(diǎn)擊我
這是我的@sentry/webpack-plugin配置
Sentry 的配置
