一文看懂 webpack 的所有 source map ！🤔

深入理解Webpack的各类source map

在前端开发中，source map经常让人感到困惑，尤其在Webpack提供的众多source选项中。本文将逐一探讨它们的不同之处。

source map，就像是编译后的代码与原始源代码之间的导航图，有助于在生产环境中追踪和修复错误。当代码编译后，失去可读性，source map的作用就是通过编译后的代码找到对应的源代码位置，帮助开发者快速定位问题。

在webpack配置中，devtool属性控制source map的生成形式。它支持多种类型，尽管名称多样，但核心机制相似。理解几个关键术语是关键：eval、source-map、inline-source-map、nosources-source-map、hidden-source-map、cheap-source-map和cheap-module-source-map。

以eval为例，它不生成独立的.map文件，而是将映射信息内置于eval函数中，虽然在开发环境中能提供一些帮助，但在生产环境中由于调试体验差而不可取。而source-map则是最标准的形式，生成单独的.map文件，错误信息定位准确，能查看源码。

尝试在项目中故意引入错误，可以看到不同source map类型下的报错信息差异。eval-source-map提供基本的错误定位，但列号可能不准确。而inline-source-map和nosources-source-map则展示了源码信息的完整性和缺失。hidden-source-map和cheap-source-map虽然有映射，但信息可能模糊或处理过。而cheap-module-source-map则定位正确，但无法定位到具体列。

总结来说，理解source map的关键在于理解每个选项背后的含义，如何根据项目需求选择合适的配置。希望这篇文章能帮助你清晰地认识Webpack的source map功能。