关于Sentry的Source Map，webpack方式的配置

Sentry 监控 如果不上传Source Map，有些问题不能精准定位，改起来不是太方便；记录一下用webpack的方式自动上传Source Map

1、安装@sentry/webpack-plugin插件

npm istall @sentry/webpack-plugin // npm

yarn add @sentry/webpack-plugin // yarn

• 如果在安装的时候提示 @sentry/cli 依赖安装不了，可以显性的安装@sentry/cli

npm install @sentry/cli

• 如果单独安装@sentry/cli还报错，可以尝试改变源,使用下面的方式安装

npm install @sentry/cli --sentrycli_cdnurl=https://mymirror.local/path

2、配置基本信息

• 在根目录新建文件 .sentryclirc

[auth]
token = f369c8e984024bc9b9ea3c82c620b52861xxxxxxxxxxxxxx // 在senntry user settings--auth tokens里面有生成token

[defaults]
url = https://xxxxxxxx.com // 你的senntry的地址
org = hxxxxxxxxn // 组织 在senntry上有这些信息
project = projectName // 该项目名称  在senntry上有这些信息

3、在vue.cofig.js里面配置插件 @sentry/webpack-plugin

const version = require('./package.json').version
process.env.VUE_APP_RELEASE = `${process.env.VUE_APP_ENV}@${version}.${dayjs().format('YYYYMMDDHHmm')}` // version 为package.json中的版本号，可自定义

const SentryWebpackPlugin = require('@sentry/webpack-plugin')
config.plugins.push(
  new SentryWebpackPlugin({
    release: process.env.VUE_APP_RELEASE, // 版本号，用于区分运行环境和构建版本
    include: 'dist',
    ignore: ['node_modules', 'webpack.config.js'],
  }),
)

// 官方文档给的其实是这样的
new SentryWebpackPlugin({
  authToken: process.env.SENTRY_AUTH_TOKEN, // 这里取的是运行时环境中的SENTRY_AUTH_TOKEN，我们在.sentryclirc中配置了默认token，这里可以不用写
  org: "example-org", // .sentryclirc中也配置了，也可以不用写
  project: "example-project", // .sentryclirc中也配置了，也可以不用写
  release: process.env.SENTRY_RELEASE, // 这里配不配都可以：如果这里配置版本号，则在 Sentry init 那里的release要和这里的保持一致；否则sourceMap对应不上，将无法精准定位问题；如果这里不配置，Sentry init 那里也不要配置，打包时会自动生成一个随机版本号
  include: ".", // 打包后js所在文件内目录
  ignore: ["node_modules", "webpack.config.js"], // 忽略的文件
}),

到这里简单的配置完成了，运行打包命令，去sentry官网去看对应项目的 Source Map是否上传了一份js文件；（在项目–设置–Source Maps）
其他的配置可查看官方文档。