webpack开发环境性能优化之优化代码调试-source-map

source-map是一种提供源代码到构建后代码的映射技术

如果构建后代码出错，会通过映射关系追踪源代码错误

在webpack.config.js中加入

devtool:'source-map',

重要的是source-map的构建参数

[inlie-|hidden-|eval-][nosources-][cheap-[module-]]source-map

前面有三个可选的参数位置

source-map：会生成built.js.map的一个映射文件

inline-source-map：内联，映射文件的代码会内嵌在构建后的built.js的末尾

hidden-source-map：会生成外部的built.js.map，但是在浏览器的source中会隐藏webpack://，不隐藏构建后代码

eval-source-map：也是内联的source-map，但是都会追加在built.js的每个模块引入的eval中

nosources-source-map：生成在外部，但是在浏览器的source中会隐藏我们的js源代码（有路径），构建后的js代码也看不见

cheap-source-map：生成在外部，和source-map类似但是错误提示到整行而不是整句，会受到babel的影响

cheap-module-source-map：生成在外部，和source-map类似但是错误提示到整行而不是整句，不会收到babel的影响

内联和外部的区别：外部会多生成文件，内联的构建速度会快

1. 开了source-map之后，如果print.js出现某种错误会告诉你出错在源代码的哪里可以精确到文件的行和列

<