记sentry配置sourcemap后的优化

需求！

打包后的文件自动过滤出sourcemap并压缩成zip包

项目结构：

说明

首先说明一下为什么会有这样的需求 因为项目中集成了 sentry 关于sentry的介绍 请点击我， 如果你已经了解了 sentry 那么你会知道在sentry中我们需要上传sourcemap来定位具体的源码行，但是在实际生产中我们是不能上传sourcemap的，这不仅仅是不安全的问题。 所有我们会在配置中打开sourcemap

module.exports = {
// ...
  productionSourceMap: true,
// ...
}

打开后就会在构建后的文件中产生以.map为后缀的文件

我们可以结合@sentry/webpack-plugin插件来实现自动上传sourcemap到sentry。更多相关信息请点击我 上面的一切都很顺利，但是我要发布到生产环境不可能手动去剔除.map文件吧，于是我就想到用nodejs去处理这个问题，

思路一 node

将文件拷贝一份，用递归遍历，拷贝的过程中去掉.map文件然后压缩文件

每次在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配置