SourceMap
SourceMap是编译后代码对源码的映射,通过映射可追踪到源代码中的错误,对于不同的SourceMap格式会明显影响到打包速度,在webpack中使用devtool
参数可设置SourceMap格式,该参数的值是一组有规律的字符串,但是要注意这些关键词的顺序:^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
想关闭SourceMap功能在webpack5以前使用
none
参数值即可,在webpack5以后使用false
参数即可
以下所说的的注释DateUrl是指//# sourceMappingURL=map文件路径或map文件内容
这样类型的注释,若找不到该文件或该文件异常则报DevTools failed to load SourceMap: Could not load content for
的警告
source-map
:SourceMap会额外生成一个映射文件,在编译后代码使用注释DataUrl引入SourceMap文件inline
:SourceMap会整个内嵌到js文件中,在编译后代码使用注释DataUrl形式呈现hidden
:SourceMap会隐藏源代码,在编译后代码添加注释DataUrl即可显示出来nosource
:SourceMap会映射源代码位置,但是不会在浏览器中显示源代码,即map文件中没有记录源代码cheap
:SourceMap精确到行,而且仅映射业务代码module
:SourceMap既映射业务代码,又映射其他loader和第三方模块代码eval
:SourceMap是使用JavaScript中的eval函数中添加注释DataUrl,会有哈希值,性能最好的方式
内敛构建速度要比外部的快,但是生成的文件较大,建议生成环境下使用
eval-cheap-module-source-map
,线上环境使用cheap-module-source-map
Comments NOTHING