@zhaogyna/webpack-plugin

Webpack 构建插件，为产物注入 debugId 并上传 SourceMap 到监控平台，实现生产环境错误堆栈还原。

安装

npm install -D @zhaogyna/webpack-plugin

peerDependencies: webpack >= 5.0.0

使用

// webpack.config.js
const { MonitorWebpackPlugin } = require('@zhaogyna/webpack-plugin')

module.exports = {
  plugins: [
    new MonitorWebpackPlugin({
      uploadUrl: 'https://monitor.example.com/api/sourcemap',
      project: 'my-app',
      authToken: 'your-auth-token',
      release: process.env.APP_VERSION,
      uploadSourceMaps: true,
    }),
  ],
}

配置项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | uploadUrl | string | - | Monitor 服务端 SourceMap 上传 URL | | project | string | - | 项目标识 | | authToken | string | - | 认证 Token，以 Authorization: Bearer <token> 方式发送 | | release | string | - | Release 版本号，需与 init({ release }) 一致 | | uploadSourceMaps | boolean | true | 是否上传 SourceMap |

工作原理

1. optimizeChunks 钩子：为每个 initial chunk 分配 debugId
2. emit 钩子：在 JS 文件头部注入 //# debugId=<uuid> 注释
3. afterEmit 钩子：收集 .map 文件，通过 multipart/form-data POST 上传

上传失败不影响构建流程，仅 console.warn 提示。

注意事项

• 仅处理 chunk.canBeInitial() 的 entry chunk
• 需要 Node.js 18+（使用内置 fetch）
• 确保 release 与 init({ release }) 中传入的值一致

License

MIT