如果构建后代码出错了,要想根据构建后的代码找到源代码哪个地方出错了进行修改,应该怎么实现呢?这个时候就出现了source-map。
source-map:一种提供源代码到构建后代码的映射技术(如果构建后代码出错了,会通过映射关系可以追踪到源代码的错误)
那么怎么实现呢?
在webpack.config.js中增加配置属性devtool
devtool: 'source-map'
那么构建完成后输出目录下会生成一个sourceMap文件(源代码到构建后代码的映射文件)比如:built.js.map()
devtool参数值有哪些?
- source-map:
外部:构建完成后会生成一个map文件。
作用:如果构建后控制台报错,控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。
能精确到行和列
- inline-source-map
内联:就是直接在构建后的js文件中生成一个base64编码格式的sourceMap文件。只生成一个文件的内联source-map
作用:如果构建后控制台报错,控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。
能精确到行和列
- hidden-source-map
外部:和source-map一样,会生成map文件,但是不会在bundle末尾追加注释
作用:如果构建后控制台报错,会提示错误代码的错误原因,但是不能追踪到源代码的错误位置,只能追踪到打包后文件中代码的错误位置。
是为了隐藏源代码,为了代码安全。
- eval-source-map
内联:每一个文件都生成对应的source-map,都在eval中
作用:如果构建后控制台报错,控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。 能精确到行和列。
eval 是一个函数,用于执行字符串中的js代码。
- nosources-source-map
外部
如果构建后控制台报错,能找到错误代码准确信息,但是点击进去没有任何代码信息。
是为了隐藏源代码,为了代码安全。
- cheap-source-map
外部
如果构建后控制台报错,控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。
但是只精确到行
- cheap-module-source-map
外部。
如果构建后控制台报错,控制台会明确的提示到错误代码的准确信息 和 源代码的错误位置。
module会将loader的source-map也加入
内联和外联的区别
- 外部另外生成了一个map文件。内联没有,是嵌套在boudle里面;
- 内联构建速度更快
总结
开发环境要求:速度快,调试更友好
速度快:(eval>inline>cheap ...) eval-cheap-source-map > eval-source-map
调试更友好:source-map > cheap-module-source-map > cheap-source-map
综合来说用:eval-source-map(调试更友好) > eval-cheap-module-source-map(性能更友好)
生产环境要考虑:源代码要不要隐藏?调试要不要友好?内联会让代码体积变的很大,所以不考虑内联
隐藏源代码: hidden-source-map(只隐藏源代码,会提示构建后代码错误信息) > nosources-source-map (全部隐藏代码信息)
调试好: source-map
综合来说用:source-map > cheap-module-source-map