一. 生产环境中遇到的问题

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

1. 变量被替换为了没有语义的名称
2. 空行和注释被剔除

对压缩混淆之后的代码除错就是一件极其困难的事情。

二. Source Map

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

• 除错工具能通过Source Map 直接显示原始代码，而不是转换后的代码

三. webpack开发环境下的Source Map （默认启用）

• 开发环境下，程序出错时，可以直接在控制台提示错误位置，并定位到具体的源代码

• 开发环境下默认生成的Source Map ，记录的是生成后的代码的位置(会导致运行报错的行数和源代码的函数不一致)。

1. 解决报错行数与源代码行数不一致问题

*** webpack.config.js ***
module.exports = {
    mode:"development",
    // 仅在 开发模式 下使用
    devtool: "eval-source-map"   // 保证运行时报错的行数和源代码的行数保持一致
}

注意：错误若是发生在Jquery 语句内还是无法准确定位

四.webpack生产环境下的 Source Map

生产环境下，如果省略devtool选项，则最后生成的文件不会有Source Map文件。这样能够防止原始代码通过Source Map的形式暴露给别有所图的人。 安全但不利于调试。

1. 只定位行数但不向外暴露源码

 devtool : "nosources-source-map"

2. 既定位行数，也向外暴露源代码(非常危险)

 devtool:"source-map"

五. Source Map实践

1. 开发环境下development，便于精准的定位到错误行

     devtool:"eval-source-map"
    

2.生产环境下prodection, 为了放置源码泄露，提高网络的安全性

    关闭Source Map
     devtool:"nosources-source-map" // 只定位行数，不泄露源码