4. Source Map 配置：开发与生产环境的正确打开方式
说到 Source Map，我见过太多团队在这上面栽跟头了。
要么是生产环境暴露了源码，要么是开发环境调试起来卡得要死。
说白了，Source Map 就是个「映射表」。它告诉浏览器：压缩后的代码第几行第几列，对应源码的哪个位置。
4.1 为什么需要 Source Map？
你想想看，我们写的代码经过 Webpack 打包后，变量名被缩短了，空格被删掉了，甚至多个文件合并成了一个。
这时候如果线上报错，浏览器告诉你「第 1 行第 30000 个字符出错了」——你能找到是哪里的问题吗？
反正我当年第一次遇到这种情况，直接懵了。
核心作用：让压缩后的代码「可读」「可调试」
- 开发环境：快速定位源码位置
- 生产环境：捕获错误时能映射回源码
4.2 开发环境配置：速度优先
我个人习惯在开发时用 eval-cheap-module-source-map。
为什么选这个？因为它构建速度快，而且能保留原始代码的行号。
// webpack.dev.js
module.exports = {
devtool: 'eval-cheap-module-source-map',
// 其他配置...
}这里有个小细节：eval 模式会把模块代码用 eval() 包裹起来。
这样做的好处是——Webpack 可以增量构建，改一行代码只重新编译那一行。
我在项目中实测过，大型项目用这个配置，热更新速度能快 3-5 倍。
小技巧：如果项目特别大（比如超过 500 个模块），可以试试 eval-source-map。虽然构建慢一点，但调试体验更好。
4.3 生产环境配置：安全与性能的平衡
生产环境就完全不一样了。
你不能把源码直接暴露出去，但你又需要能定位线上问题。
我推荐用 hidden-source-map 或者 nosources-source-map。
// webpack.prod.js
module.exports = {
devtool: 'hidden-source-map',
// 或者
// devtool: 'nosources-source-map',
// 其他配置...
}这两种有什么区别？我直接给你列个表：
| 配置项 | 浏览器能否看到源码 | 错误堆栈能否映射 | 安全性 |
|---|---|---|---|
hidden-source-map |
不能（需要手动上传） | 能（配合错误监控） | 高 |
nosources-source-map |
能看到文件名和行号 | 能 | 中 |
source-map |
能 | 能 | 低（不推荐） |
注意：千万不要在生产环境用 source-map 或 eval-source-map。我曾经见过一个项目直接把源码暴露了，结果被竞争对手扒了个精光。
4.4 最佳实践：结合错误监控平台
嗯，这里要重点说一下。
生产环境我通常的做法是：
- 用
hidden-source-map生成 .map 文件 - 把 .map 文件上传到 Sentry 或自建的错误监控平台
- 删除服务器上的 .map 文件
这样做的好处是：
- 用户永远看不到源码
- 错误监控平台能还原出原始代码位置
- .map 文件不占用用户带宽
// 配合 Sentry 的配置示例
const SentryWebpackPlugin = require('@sentry/webpack-plugin');
module.exports = {
devtool: 'hidden-source-map',
plugins: [
new SentryWebpackPlugin({
include: './dist',
ignore: ['node_modules'],
urlPrefix: '~/js',
release: process.env.RELEASE_VERSION,
}),
],
};4.5 性能影响：别忽视 .map 文件的大小
你可能觉得 .map 文件只是调试用的，无所谓大小。
但你知道吗？一个 .map 文件可能比源码本身还大 3-5 倍。
我做过一个统计：
| 源码大小 | .map 文件大小 | 比例 |
|---|---|---|
| 200 KB | 1.2 MB | 6 倍 |
| 500 KB | 2.8 MB | 5.6 倍 |
| 1 MB | 5.5 MB | 5.5 倍 |
所以生产环境一定要把 .map 文件剥离出去，别让用户下载。
建议：在 CI/CD 流程中加一个步骤，构建完成后自动删除 dist 目录下的 .map 文件，只保留上传到监控平台的那一份。
4.6 避坑指南
我曾经踩过一个坑：用了 cheap-source-map，结果发现 loader 处理后的代码和源码对不上。
后来才明白，cheap 模式只保留行号，不保留列号。如果一行有多个语句，就定位不准了。
还有一次，我在生产环境用了 inline-source-map，结果打包后的文件直接膨胀了 10 倍。
因为 inline 模式把整个 .map 文件用 Base64 编码塞进了 JS 文件里。
记住：
- 开发环境：
eval-cheap-module-source-map - 生产环境：
hidden-source-map+ 上传到监控平台 - 永远不要在生产环境用
inline或eval模式
说白了，Source Map 配置就是个取舍问题。
开发时追求速度，生产时追求安全和可控。
找到适合你项目的平衡点，比盲目追求「最佳实践」更重要。