需求！
打包后的文件自动过滤出sourcemap并压缩成zip包
项目结构：
项目结构图
说明
首先说明一下为什么会有这样的需求
因为项目中集成了 sentry 关于sentry的介绍 请点击我，
如果你已经了解了 sentry
那么你会知道在sentry中我们需要上传sourcemap来定位具体的源码行，但是在实际生产中我们是不能上传sourcemap的，这不仅仅是不安全的问题。
所有我们会在配置中打开sourcemap
module.exports = {
// ...
productionSourceMap: true,
// ...
}
打开后就会在构建后的文件中产生以.map为后缀的文件
image.png
我们可以结合
@sentry/webpack-plugin插件来实现自动上传sourcemap到sentry。更多相关信息请点击我上面的一切都很顺利，但是我要发布到生产环境不可能手动去剔除
.map文件吧，于是我就想到用nodejs去处理这个问题，
思路一 node
将文件拷贝一份，用递归遍历，拷贝的过程中去掉.map文件然后压缩文件
image.png
每次在
npm run build完成后跑一下相关任务
思路二 webpack插件
然后我突然意识到可能不需要这么复杂，是否有对应的webpack插件就可以完成这个事情？
于是我找到了一个copy-webpack-plugin
相关配置
更多信息 请点击我
看上去很美好一切需要的都有，but
实际是复制了一个空文件，然后我把dist改成其他文件就可以了。然后我发现是插件的执行顺序问题
然后我又去看了一遍webpack插件的执行钩子，并看到该插件issue相关问题讨论
虽然我发现vuecli3在复制asses下的文件到dist目录下也是使用的该插件，但是由于dist是在构建以后才生产的，而插件是在这之前就开始执行了，所以是空目录。
最终方案
当我放弃这些抱着试一试的态度去找webpck的zip插件时有了意外的发现。
这就是我的最终实现方式 非常的简单 zip-webpack-plugin
new ZipPlugin({
path: path.join(__dirname, 'dist'),
filename: 'dist.zip',
exclude: [/\.map$/]
}),
更多说明 请点击我
这是我的@sentry/webpack-plugin配置
Sentry 的配置
网友评论