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