如何通过*.map.js文件还原webpack://对应的完整项目目录

webpack://是浏览器开发者工具识别SourceMap后虚拟生成的协议前缀，并非真实可访问的HTTP地址，所以直接访问无返回，所有原始代码和目录结构都存储在.js.map文件的sources、sourcesContent字段中，你可以按照以下步骤基于Node.js环境提取完整项目目录：

1. 前置准备 #

• 将目标站点所有打包后的.js文件和对应的.js.map文件全部下载到本地同一目录，确保每个js文件与其map文件文件名匹配（例：main.js对应main.js.map）

2. 安装反解工具 #

打开终端进入存储map文件的目录，执行npm命令安装纯Node.js实现的sourcemap反解工具reverse-sourcemap：

# 全局安装
npm install -g reverse-sourcemap
# 若不想全局安装可改为本地安装
npm install reverse-sourcemap

3. 执行目录提取 #

单个map文件提取 #

执行命令即可自动生成对应目录结构：

reverse-sourcemap --output-dir <自定义输出目录路径> <待反解的map文件路径>
# 示例：将当前目录下的main.js.map反解输出到当前的source文件夹
reverse-sourcemap --output-dir ./source main.js.map

多map文件批量提取 #

如果存在多个map文件，可批量执行反解，所有文件会自动合并到同一目录结构中：

# Linux/Mac 终端命令
for file in *.js.map; do reverse-sourcemap --output-dir ./source "$file"; done

# Windows PowerShell 命令
Get-ChildItem *.js.map | ForEach-Object { reverse-sourcemap --output-dir ./source $_.FullName }

• 部分站点会对SourceMap做裁剪，删除sourcesContent字段或混淆路径，这种情况仅能提取到目录结构，无法拿到原始代码内容
• 反解后的目录会完全对齐webpack://下的层级，包含完整的业务源码、node_modules目录内容

内容的提问来源于stack exchange，提问作者Musafiroon