devtool 参数决定 Webpack source map 的生成方式与嵌入策略，不同值影响映射精度、构建速度及部署安全性；常用值包括开发用的 'eval-source-map'、调试优先的 'source-map'、生产用的 'hidden-source-map' 和兼顾速度的 'cheap-module-source-map'。
devtool 参数决定 Webpack 如何生成和嵌入 source map，不同值对应不同的映射方式、精度、构建速度和部署场景。选错会导致 DevTools 看不到源码、断点失效或生产环境泄露源码。
常用 devtool 值及其行为特点
以下是最常使用的几种配置，按开发/生产典型用途划分：
- 开发阶段推荐 'eval-source-map'：每个模块用 eval() 包裹，并附带独立的 source map；支持完整列信息、热更新快、能右键“Reveal in Sources”，但不生成 .map 文件（映射以 data URL 形式内联）。
-
调试精度优先选 'source-map'：生成独立的
.js.map文件，映射最准确（含行列、原始内容 sourcesContent），适合本地深度调试或发布前验证；缺点是构建慢、产物体积略增。 - 生产环境可用 'hidden-source-map'：生成 .map 文件但不写 sourceMappingURL 注释，浏览器不会自动加载；适合上传到 Sentry 或其他错误监控平台，既保留调试能力又避免用户直接访问源码。
- 兼顾速度与基本定位用 'cheap-module-source-map'：只映射到行级别（无列信息），忽略 loader 生成的代码（如 Babel 输出），构建较快，适合中大型项目日常开发调试。
配置位置与基础写法
在 webpack.config.js 的顶层对象中设置：
module.exports = {
mode: 'development', // 或 'production'
devtool: 'source-map' // 替换为你需要的值
};注意：mode: 'development' 默认仅启用 eval 映射（无 .map 文件），不等于开启完整 source map；必须显式声明 devtool 才生效。
配合 output 确保映射可访问
生成独立 .map 文件时，需确认输出路径合理，否则浏览器找不到映射：
- 确保
output.path指向正确目录（如dist/）； - 检查
output.filename和output.chunkFilename是否含 hash，避免缓存导致 .map 文件不匹配； - 若部署在子路径，通过
output.devtoolModuleFilenameTemplate调整 source 字段路径，例如：devtoolModuleFilenameTemplate: '[absolute-resource-path]'可防止路径解析失败。
浏览器端加载关键点
映射能否生效，还取决于三件事是否同时满足：
- 打包产物 JS 文件末尾存在
//# sourceMappingURL=xxx.map注释（Webpack 自动添加）； - .map 文件与 JS 文件同目录部署，或注释中的 URL 可被浏览器直接请求（返回 200）；
- 浏览器 DevTools 中已启用源映射：
Settings → Preferences → Sources → 勾选 “Enable JavaScript source maps” 和 “Enable CSS source maps”。
