false
错误直接定位到打包后的文件位置
none
不可配置,mode为production的默认配置,错误直接定位到打包后的文件位置(但是被压缩成一行了)
eval
mode为development的默认配置.
打包后的原文件执行代码被eval包裹,并在最后面加上//# sourceURL=webpack://webpack-test/./src/index.js,映射到转换后的代码,所以报错,在原文件可能会有错误,在转化后的代码知道错误在哪一行哪一列
source-map
增加打包后的原文件的映射文件,在打包后的文件末尾增加//# sourceMappingURL=main.js.map指定原文件的映射文件是哪个,知道错误在哪一行哪一列
eval-source-map
打包后的原文件执行代码被eval包裹,并且,source-map被转化为base64放在后面,知道错误在哪一行哪一列
cheap-source-map
生成映射文件,错误信息只定位到行,不定位到列,并且忽略被loader处理的文件(不能准确定位)
cheap-module-source-map
cheap-module为固定搭配,生成映射文件,错误信息只定位到行,不定位到列,并且可以很好的定位到被loader处理过后的位置
cheap-source-map的情况
cheap-module-source-map的情况
nosources-source-map
只提供报错信息,知道错误在哪一行哪一列,在浏览器追溯不到报错的文件
inline-source-map
不生成映射文件,但是将映射内容直接转成base64,放在打包文件最后,知道错误在哪一行哪一列
hidden-source-map
生成映射文件,但是再打包后的文件里面,不添加映射文件注释
总结
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map 打包后映射到原文件的内容的处理方式-是否在浏览器可以追溯到原文件-是否开启低开销(低开销是否处理loader处理的内容)-是否需要映射到原文件
建议
开发及测试环境
source-map(Vue的设置)或者cheap-module-source-map(react的设置)
生产环境
不设置或者false
