为什么需要`SourceMap`

开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子：
经过webpack压缩过后, 所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。
- 这里故意设置sum.js出错(调用两次 return 致使代码出现问题)
// 简单的加法函数[es6语法,数组的累加器方法(reduce)]
export default function sum (...args){
return args.reduce((p , c) => p + c , 0)();//这里调用两次return导致代码出错
}
- 此时浏览器的控制台报告错误如下:

由此可见,我们看到控制台报错是编译后的,并非源码
因此,我们需要更加准确的错误提示，来帮助我们更好的开发代码。

什么是`SourceMap`

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

`SourceMap`怎么用

通过查看Webpack DevTool 文档可知，SourceMap 的值有很多种情况.

实际开发时我们只需要关注两种情况即可：

开发模式使用: `cheap-module-source-map`

优点：打包编译速度快，只包含行映射
缺点：没有列映射
开发模式的源码配置如下:(webpack.dev.js)

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        path: undefined, // 开发模式没有输出(因为存在开发服务器,不存在输出)，不需要指定输出目录
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        // clean: true, // 开发模式没有输出，不需要清空输出结果(开发服务器)
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
        ],
    },
    // 插件
    plugins:[
        // plugin的配置
    ],

    // 配置开发服务器: 不会输出任何资源, 在内存中的编译打包的*******************************
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "5000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    // **********************************************************************************
    // 模式
    mode:"development",//开发模式
    devtool: "cheap-module-source-map",//sourceMap开发模式
};

生产模式使用：`source-map`

优点：包含行/列映射
缺点：打包编译速度更慢
生产模式的源码配置如下:(webpack.pro.js)

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        path: undefined, // 开发模式没有输出(因为存在开发服务器,不存在输出)，不需要指定输出目录
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        // clean: true, // 开发模式没有输出，不需要清空输出结果(开发服务器)
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
        ],
    },
    // 插件
    plugins:[
        // plugin的配置
    ],

    /*
        生产模式不需要开发服务器(devServer)
    */
    // 模式
    mode:"production",//生产模式
    devtool: "source-map",//sourceMap生产模式
};