Webpack 中为不同环境生成内联 SourceMap，需通过 devtool 动态配置：开发用 eval-cheap-module-source-map，生产禁用内联而选 hidden-source-map 或 source-map，并验证 DevTools 源码映射是否生效。
在 Webpack 中为不同环境生成内联 SourceMap，核心是通过 devtool 配置项结合环境判断来动态设置。内联模式（如 eval-source-map、inline-source-map）的特点是把 SourceMap 内容直接嵌入到打包后的 JS 文件中，不生成独立的 .map 文件，适合开发调试，但不适合生产环境。
开发环境用 eval-source-map
这是最常用、调试体验最好的内联方案：每个模块都包裹在 eval() 中，并附带完整行+列映射，错误能精准定位到源码位置，且热更新响应快。
- 构建速度较快（比
source-map快很多） - 支持 TypeScript、Babel 等 loader 的源码定位（需搭配
module） - 推荐组合：
eval-cheap-module-source-map（兼顾速度与调试精度）
生产环境一般不用内联 SourceMap
内联会显著增大 JS 文件体积，暴露源码结构，存在安全与性能风险。生产环境应避免 inline- 或 eval- 类型。
- 若确需 SourceMap（如内部监控系统），用
source-map生成独立文件，并通过 HTTP 头或 CDN 权限控制访问 - 如需隐藏映射关系（防止用户手动加载），可选
hidden-source-map：生成.map文件但不写sourceMappingURL注释
配置方式：按 NODE_ENV 动态切换
在 webpack.config.js 中根据环境变量自动选择：
立即学习“Java免费学习笔记（深入）”；
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
mode: isProduction ? 'production' : 'development',
devtool: isProduction
? 'hidden-source-map' // 或 'source-map'
: 'eval-cheap-module-source-map'
};
确保启动时设置环境变量：cross-env NODE_ENV=development webpack servecross-env NODE_ENV=production webpack build
验证是否生效
打包后检查输出 JS 文件末尾：
- 内联模式（如
eval-source-map）不会出现sourceMappingURL注释，但浏览器 DevTools 的 Sources 面板能看到原始源文件 - 打开 Chrome DevTools → Sources → 左侧文件树中展开
webpack://，应能看见你的.ts或.jsx源文件 - 故意触发一个错误（如
throw new Error('test')），控制台堆栈应显示源文件路径和行列号
