Webpack生产构建中生成独立分离版SourceMap，需设devtool为source-map或hidden-source-map，配置output.sourceMapFilename匹配JS文件hash，并确保TerserPlugin启用sourceMap:true。
在 Webpack 生产构建中生成独立的分离版 SourceMap，关键在于正确配置 devtool 和 output.sourceMapFilename，并确保 SourceMap 文件不内联、不混淆、不被压缩工具意外剥离。
设置 devtool 为 production 推荐值
生产环境应避免使用 eval 或 inline 类型（如 inline-source-map），它们会把 SourceMap 嵌入打包文件，增大体积且不安全。推荐使用：
-
source-map：生成独立的.map文件，最标准、调试友好，适合部署后排查问题； -
hidden-source-map：同样生成独立文件，但不会在 bundle 末尾追加//# sourceMappingURL=...注释，适合不想暴露 SourceMap 路径的场景（例如仅用于错误监控服务）。
在 webpack.config.js 的生产模式配置中明确指定：
mode: 'production',
devtool: 'source-map', // ✅ 关键
// ...
};
确保输出路径与文件名可控
Webpack 默认生成的 SourceMap 名称是 [name].js.map，但需显式控制其输出位置和命名，尤其当启用 output.filename 含哈希（如 [name].[contenthash].js）时，SourceMap 也应匹配：
立即学习“Java免费学习笔记（深入）”；
- 设置
output.sourceMapFilename，使其与 JS 文件名一致（含 hash）； - 确保
output.path指向最终部署目录（如dist/），SourceMap 会一并输出到该目录。
示例配置：
output: {path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
sourceMapFilename: '[name].[contenthash].js.map' // ✅ 保持 hash 一致性
}
防止 UglifyJS / Terser 剥离 SourceMap
Webpack 5+ 默认使用 TerserPlugin 压缩代码。若未正确配置，Terser 可能忽略或丢弃 SourceMap。需确认插件启用且保留映射：
- TerserPlugin 默认已开启
sourceMap: true（当devtool启用时）； - 如手动配置 TerserPlugin，请显式传入
sourceMap: true； - 避免设置
terserOptions.sourcemap: false或覆盖默认行为。
无需额外安装插件，但可检查 node_modules 中是否意外禁用了它。
验证生成结果
构建完成后，检查 dist/ 目录下是否同时存在：
main.abc123.jsmain.abc123.js.map
打开 JS 文件末尾，应看到一行：
//# sourceMappingURL=main.abc123.js.map
浏览器开发者工具 → Sources 面板中，展开 localhost 或文件系统，能看到原始源码文件结构 —— 表明 SourceMap 已正确加载。
