obfuscator-sourcemap-rspack-plugin

Rspack 插件 — 修复 webpack-obfuscator 在 Rspack / Rsbuild 中 SourceMap chain 断裂的问题。

English

问题背景

在 Rspack 中使用 webpack-obfuscator 时，SourceMap 解析完全失效——混淆后代码的错误堆栈无法还原到原始位置。

原因：

1. webpack-obfuscator 在 PROCESS_ASSETS_STAGE_DEV_TOOLING 阶段正确合并了 SourceMap（合并后的 map 覆盖了完整的混淆代码范围）
2. Rspack 的 native SourceMapDevToolPlugin 在后续阶段生成 .map 文件时，使用了 webpack 模块图中的原始 SourceMap，而非合并后的版本
3. 最终 .map 文件仅覆盖了混淆代码的约 17%——超出覆盖范围的错误位置全部解析为 null

传统 webpack 中不会出现此问题，因为 webpack 的 SourceMapDevToolPlugin 是 JS 实现，会忠实读取 SourceMapSource 中的 map。

安装

# npm
npm install obfuscator-sourcemap-rspack-plugin --save-dev

# yarn
yarn add obfuscator-sourcemap-rspack-plugin -D

# pnpm
pnpm add obfuscator-sourcemap-rspack-plugin -D

使用

在 Rspack / Rsbuild 配置中，将此插件放在 webpack-obfuscator 之后：

ESM

import WebpackObfuscator from 'webpack-obfuscator';
import { ObfuscatorSourceMapRspackPlugin } from 'obfuscator-sourcemap-rspack-plugin';

// rsbuild.config.ts — 在 tools.rspack 回调中
config.plugins?.push(
  new WebpackObfuscator(
    { sourceMap: true, sourceMapMode: 'separate', /* ... */ },
    ['**/lib-*'],
  ),
  new ObfuscatorSourceMapRspackPlugin(),
);

CJS

const WebpackObfuscator = require('webpack-obfuscator');
const { ObfuscatorSourceMapRspackPlugin } = require('obfuscator-sourcemap-rspack-plugin');

// rspack.config.js
module.exports = {
  plugins: [
    new WebpackObfuscator({ sourceMap: true, sourceMapMode: 'separate' }, ['**/lib-*']),
    new ObfuscatorSourceMapRspackPlugin(),
  ],
};

配置项

| 选项 | 类型 | 默认值 | 说明 | |---|---|---|---| | hashPattern | RegExp | /\.[0-9a-f]{6,16}\./ | 用于匹配文件名中 content hash 段的正则。Rspack 在混淆后可能重新计算 hash，导致 .js 和 .map 文件名不同，插件通过去除 hash 来匹配同一 chunk。 | | silent | boolean | false | 静默模式，构建时不输出日志。 |

new ObfuscatorSourceMapRspackPlugin({
  hashPattern: /\.[a-z0-9]{8}\./,  // 自定义 hash 匹配模式
  silent: true,                     // 不输出日志
});

工作原理

Rspack 构建流水线
━━━━━━━━━━━━━━━━

1. 模块编译 & 代码生成
   → Rspack 生成打包代码 + 原始 SourceMap

2. PROCESS_ASSETS_STAGE_DEV_TOOLING (stage 500)
   → webpack-obfuscator 执行：
     • 读取 SourceMapSource 中的 inputSourceMap
     • 混淆代码
     • 合并 SourceMap（混淆后 → 原始源码） ← ✅ 此时是正确的

3. STAGE_DEV_TOOLING + 1 (stage 501)
   → 🔧 本插件 — Phase 1：
     从 SourceMapSource 中捕获合并后的 map → 缓存

4. Rspack native SourceMapDevToolPlugin
   → 将 SourceMapSource 拆分为 .js + .map
   → ⚠️ .map 使用了模块图的原始 SourceMap，而非合并后的版本

5. PROCESS_ASSETS_STAGE_REPORT (stage 5000)
   → 🔧 本插件 — Phase 2：
     用缓存的合并 map 替换 .map 文件 → ✅ chain 恢复

兼容性

| 依赖 | 支持版本 | |---|---| | @rspack/core | >=1.0.0 | | webpack-obfuscator | >=3.0.0 | | Node.js | >=16.0.0 |

注意：如果你使用的是传统 webpack（非 Rspack），不需要此插件——webpack 的 JS 实现会正确保留合并后的 SourceMap。

许可证

MIT