cheap-source-map 是 Webpack 中兼顾构建速度与基本调试能力的 SourceMap 类型，仅保留行号映射、不包含列信息，生成快、体积小，适合开发阶段快速定位错误；但需注意其不解析 loader 转换后的代码，推荐改用 cheap-module-source-map 以精准映射原始源码。
cheap-source-map 是 Webpack 中一种兼顾速度与基本调试能力的 SourceMap 类型，它不包含列信息（column mapping），只保留行号映射，因此生成快、体积小，特别适合开发阶段频繁重构时使用。
它本身不是用来“加快重构”本身的，而是通过缩短每次构建后定位错误的时间，间接提升重构效率。关键在于：改完代码 → 快速构建 → 报错时一眼看到源码位置 → 立刻修正，形成高效闭环。
以下是具体用法和优化要点：
为什么 cheap-source-map 能提速构建
- 不生成列映射，省去大量坐标计算；
- 不内联（区别于
eval-*类型），不增大 bundle 体积； - 比
source-map构建快 30%~50%，尤其在中大型项目中效果明显； - 错误堆栈能准确定位到源文件的哪一行（对大多数逻辑错误已足够）。
正确配置 cheap-source-map
在开发环境的 webpack.config.js 中设置：
立即学习“Java免费学习笔记（深入）”；
module.exports = {
mode: 'development',
devtool: 'cheap-source-map', // ✅ 推荐用于快速迭代
// 其他配置...
};⚠️ 注意：
-
cheap-source-map不带module前缀，意味着它不会解析 loader 处理后的中间代码（比如 Babel 编译前的 ES6），仅映射原始源码 → 最终打包 JS 的行关系； - 如果你用了 Babel、TypeScript 等 loader，建议改用
cheap-module-source-map（多一个module，能正确映射经 loader 转换后的源码行），这才是开发时更实用的选择。
更推荐的组合：cheap-module-source-map
它在保持构建速度优势的同时，真正还原你写的源码（而非 loader 输出的中间代码）：
devtool: 'cheap-module-source-map'
效果对比：
-
cheap-source-map：报错显示index.js:12，但实际是index.ts第 8 行 → ❌ 容易误判 -
cheap-module-source-map：报错直接指向index.ts:8→ ✅ 精准定位
配合其他提速手段一起用
单独开 cheap-module-source-map 已有明显收益，再叠加以下配置，重构体验更顺滑：
-
启用持久化缓存（Webpack 5+）：
cache: { type: 'filesystem', buildDependencies: { config: [__filename] } } -
限制 loader 处理范围（避免扫描 node_modules）：
module: { rules: [{ test: /\.js$/, include: path.resolve(__dirname, 'src'), exclude: /node_modules/, use: 'babel-loader' }] } -
关闭不必要的插件（如 TerserPlugin 在开发时禁用压缩）：
optimization: { minimize: false // development 下默认 false，确认未被覆盖 }
不要用在生产环境
cheap-module-source-map 会生成 .map 文件并暴露源码路径，上线前务必切换为更安全的类型，例如：
-
source-map（完整映射，可上传至错误监控平台，但不内联） -
hidden-source-map（生成 map 文件但不告诉浏览器，用于 Sentry 等工具） - 或干脆不生成（
false），靠日志 + sourcemap 上传机制分离处理
不复杂但容易忽略。
