[webpack] 第2021天 在webpack中，如何配置生成Source Map？

[haizhilin2013]

第2021天 在webpack中，如何配置生成Source Map？

3+1官网

我也要出题

[WILLwings7092]

1. 首先简单介绍下Source Map是什么以及作用： Source Map 是一种映射关系文件，记录了转换后的代码与原始源代码之间的对应关系，方便我们调试以及错误定位。 这种对应关系越具体，越会影响构建性能，所以配置它的目的是寻求错误信息与性能的平衡。
2. 可以通过 Devtool 来配置（官网文档 https://webpack.js.org/configuration/devtool/）
   • eval：最快的 Source Map 方式，但提供的信息最少
   • cheap-module-source-map 提供行级别的映射，但不包括列信息，适合生产环境
   • source-map 提供最详细的映射信息，但构建时间较长，适合开发环境