记sentry配置后的一点优化

需求！

打包后的文件自动过滤出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 的配置