webpack高级篇1.1. source-map

在之前基础的学习中，我们基于webpack构建了基础工程化环境，将我们认为需要的功能配置了上去。 除开公共基础配置之外，我们意识到两点:

（1）开发环境(mode=development)：追求强大的开发功能和效率，配置各种方便开发的功能;
（2）生产环境(mode=production)：追求更小更轻量的bundle(即打包产物);

source-map

在之前的配置(如下图)中，我们通过 webpack 把源码打包成 bundle.js。
客户端（浏览器）读取的就是打包后的 bundle.js，当浏览器执行代码报错的时候，报错的内容就是 bundle.js 中的内容。
而我们要解决报错，就需要定位报错信息到源码上，即需要 bundle 报错的语句及行列映射到源码上，这时候就可以用source-map。

下面是个简单的示例

module.exports = {
  // ...
  // 开发环境推荐使用"source-map"
  // 生产环境一般不开启
  devtool: 'source-map'
}

除开’source-map’外，还可以基于我们的需求设置其他值，webpack devtool一
共提供了7种SourceMap模式：