一文大白话讲清楚webpack进阶——1——SourceMap

一文大白话讲清楚webpack进阶——1——SourceMap

1. 啥是SourceMap

• 我们通过webpack构建后，源代码经过压缩，转化，合并等操作后，跟之前的不一样了，如果我们在运行时，遇到问题，想定位具体的错误位置时，发现啥啥看不懂，这特么可如何是好
• 于是，来个一个东西，让构建后的代码和源代码形成一一对应关系，在我们调试时，帮我们还原到原来的代码便于调试
• 这个东西就是SourceMap

2. SourceMap的结构

• SourceMap由三部分组成，

1. 我们的源码
2. 经过webpack构建后的bundle（包含指向SourceMap的地址）
3. Map文件,记录原始代码与构建后的代码之间的位置映射关系

3. SourceMap触发时机

• 我们在运行时不会加载SourceMap，只有主动去触发才会加载，比如打开调试工具DevTool面板事，会根据bundle里面的SourceMap地址去请求加载SourceMap,并按照远射规则还原源代码
• 这样既能保证不仅影响正常使用，又能实现快速还原源代码

4. SourceMap怎么配置

• 可以两种方式配置SourceMap

4.1 devtool配置

• 在webpack.config.js配置文件中，通过属性devtool配置

module.exports={
    devtool:'source-map'
}

• 然后构建完成后，会发现每一个bundle都生成了一个对应的.map文件
  

• 其中

1. version:指代sourcemap版本
2. names:一个字符串数组，记录原始代码中出现的变量名
3. file:一个字符串，构建后的bundle名
4. sourceContent:一个字符串数组，原始代码的内容
5. source：一个字符串数组，原始文件名
6. sourceRoot：一个字符串，源文件根目录
7. mappings:一个字符串数组，记录打包产物与原始代码的位置映射关系

4.1.1 devtool属性

• devtool一共25种属性，但是可归为七大类，

4.1.1.1 eval

• 生成的模块代码北欧包裹在eval中，模块的sourceMap信息直接通过地址挂在模块代码内，不生成具体的map文件

4.1.1.2 source-map

• 生成map文件，而且除了eval值，其他值都包含了source-map字段

4.1.1.3 cheap

• 抛弃列维度，只能映射到代码行维度

4.1.1.4 module

• module一般配合cheap使用

4.1.1.5 nosources

• 生成的Map文件不含源代码，需要配合sentry等工具完成源码映射

4.1.1.6 hidden

• bundle不含SourceMap地址

4.1.1.7 inline

• 将SourceMap内容直接Base64编码，追加到bundle中去

4.1.2 生产环境适合用的属性

4.1.2.1 source-map

• 信息完整，但是安全性低

4.1.2.2 hidden-source-map

• 信息较完整，安全性较低，通过,map文件拿到sourceMap地址后，可以获取源码

4.1.2.3 nosuorcs-source-map

• 没有源码信息，安全性高，配合sentry等工具完成源码映射

4.2 SourceMapDevToolPlugin配置

• 其实，devtool的本质就是SourceMapDevToolPlugin，只不过做了抽离，为了便于记忆和使用
• SourceMapDevToolPlugin是webpack内置插件，不需要额外require，直接通过webpack使用

const webpack=require('webpack')
modules.exports={
    plugins:[
        new webpack.SourceMapDevToolPlugin({
            /**
             * 通过配置项完成精细化的匹配原则
             */
            /
        })
    ]
}