Source map

Source map

使用source map

作用： 通过Source map定位到源代码

科普文章：http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html

开发环境开启，线上环境关闭

线上排除问题的时候可以将Source map 上传到错误监控系统

source map关键字

• eval： 使用eval包裹模块代码

• Source map： 产生.map文件

• cheap：不包含列信息

• inline：将.map作为DataURL嵌入，不单独生成.map文件

• module：包含loader的Source map

Source map 类型

devtool	首次构建	二次构建	是否适合生产环境	可以定位的代码
（none）	+++	+++	yes	最终输出的代码
eval	+++	+++	no	webpack生成的代码（一个个的模块）
cheap-eval-source-map	+	++	no	经过loader转换后的代码（只能看到行）
cheap-module-eval-source-map	o	++	no	源代码（只能看到行）
eval-source-map	--	+	no	源代码
cheap-source-map	+	o	yes	进过loader转换后的代码（只能看到行）
cheap-module-source-map	o	-	yes	源代码（只能看到行）
inline-cheap-source-map	+	o	no	经过loader转换后的代码（只能看到行）
inline-cheap-module-source-map	o	-	no	源代码（只能看到行）
source-map	--	--	yes	源代码
inline-source-map	--	--	no	源代码
hidden-source-map	--	--	yes	源代码

配置

module.exports = {
      // 省略。。。。
      devtool: "source-map"
};