[JavaScript知识库]Webpack的Source Map

1.生成环境遇到的问题

前端项目在投入生产环境之前，都需要对JavaScript源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。

其中，会不可避免的一些问题：

• 对压缩混淆之后的代码除错（debug）

• 变量被替换成没有任何语义的名称

• 空行和注释被剔除

2.什么是Source Map

Source Map就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着代码压缩混淆前后的对应关系。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

3.webpack开发环境下的Source Map

在开发环境下，webpack默认启用了Source Map功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码：

3.1默认Source Map问题

开发环境下默认生成的Source Map，记录的时生成后代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

3.2解决默认Source Map的问题

开发环境下，推荐在webpack.config.js中添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致：

module.exports = {
    mode: 'development', //mode用来指定构建模式，可选值有development 和production.
    //eval-source-map仅限在“开发模式”下使用，不建议在生产模式下使用
    //此选项生产的Source Map能够保证“运行时报错的行数”与“源代码的行数”保持一直
    devtool:'eval-source-map',
    //这个选项会暴露代码，仅仅适合调试用，否则会有代码泄露风险
}

4.webpack生产环境下的Source Map

在生产环境下，如果省略了devtool选项，则最终生成的文件中 不包含 Source Map。这能够防止原始代码通过Source Map的形式暴露给别有所图的人。

4.1只定位行数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时，可以将devtool的值设置为nosources-source-map。

这样，控制台只反馈出错的行数，但链接不会定位到具体的位置。

此外，对于nosources-source-map这个值，如果改成source-map的话，同样具有暴露风险。

5.Source Map的最佳实践

1. 开发环境下：

- 建议把devtool的值设置为eval-source-map

- 好处：可以精准定位到具体的行数。

1. 生产环境下：

- 建议关闭Source Map或将devtool的值设置为nosources-source-map

- 好处：防止源码泄露