search

haizlin / fe-interview

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.52k stars 3.26k forks source link

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

Open haizhilin2013 opened 3 weeks ago

haizhilin2013 commented 3 weeks ago

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

3+1官网

我也要出题

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