webpack5零基础入门-18sourcemap的应用

webpack所谓的高级配置其实就是进行webpack优化，让代码在编译/运行时性能更好

一般会从一下角度进行优化：

1.提升开发体验

2.提升打包构建速度

3.减少代码体积

4.优化代码运行性能

SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。

它会生成一个xxx.map文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过xxx.map文件，从构建后的代码出错的位置找到映射后源代码出错的位置。从而让浏览器提示源代码出错的位置，帮助我们更快的找到错误代码的位置。

sourcemap通过wepackconfig.js中的dvetool属性来进行配置

一般我们会使用两种常用的模式

1.开发模式：cheap-module-source-map

优点：打包编译速度快，只包含行映射

缺点：没有列映射

    mode: 'development',
    devtool: 'cheap-module-source-map'

2.生产模式：source-map

优点：包含行/列映射

缺点：打包编译速度更慢

    mode: 'production',
    devtool: 'source-map',

3.启动 

3.1开发模式下启动，查看报错

 明确标注出了报错的代码的文件位置以及行数

 3.2生产模式下启动

可以看到打包后的文件夹中会多出一个map.js

 

这就是sourcemap生成的源代码和构建后的代码的映射关系

查看报错信息，生产模式下也明确的标注了报错代码的文件位置以及行数和列数

这就是sourcemap的主要作用，优化代码调试的体验