1. 为什么
开发时,我们运行的代码是经过webpack编译后的,如果出现问题, 定位会比较麻烦,比如下面main.js
中有一个错误:
const result = sub(10, 5);
console.log(result);
console.log(result.reduce());
在项目运行时,查看报错信息:
所有css
和js
合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多,那么很难去发现错误出现在哪里。
所以我们需要更加准确的错误提示,来帮助我们更好的开发代码。
2. 是什么
SourceMap(源代码映射)
是一个用来生成源代码与构建后代码一一映射的文件的方案。
它会生成一个xxx.map
文件,里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了,会通过xxx.map
文件,从构建后代码出错位置找到映射后源代码出错位置,从而让浏览器提示源代码文件出错位置,帮助我们更快的找到错误根源。
3. 怎么用
通过查看Webpack DevTool 文档可知,SourceMap
的值有很多种情况。
但实际开发时我们只需要关注两种情况:开发模式和生产模式
3.1 开发模式
即 cheap-module-source-map
- 优点:打包编译速度快,只包含行映射
- 缺点:没有列映射
module.exports = {
// 其他省略
mode: "development",
devtool: "cheap-module-source-map",
};
运行npm start
,查看报错如下:
这样就比较直观的找到错误信息所在地了。
3.3 生产模式
即:source-map
- 优点:包含行/列映射
- 缺点:打包编译速度更慢
module.exports = {
// 其他省略
mode: "production",
devtool: "source-map",
};
执行npm run build
,在dist
目录下css
和js
分别帮我们生成对应的map
文件
打开index.html
,查看报错信息
虽然有混淆,但对定位问题来说更简单直接,也显示了对应行列信息。