webpack系列文章：
- 【Webpack 性能优化系列(9) - 多进程打包】极大的提升项目打包构建速度！！！
- 【Webpack 性能优化系列(8) - PWA】使用渐进式网络应用程序为我们的项目添加离线体验
- 【Webpack 性能优化系列(7) - 懒加载和预加载】
- 【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
- 【Webpack 性能优化系列(5) - tree shaking 】去除未引用代码，减少代码体积！！！
- 【Webpack 性能优化系列(4) - 缓存 】详解如何做bable缓存和文件资源缓存
- 【Webpack 性能优化系列(3) - oneOf】
- 【Webpack 性能优化系列(1) - HMR 热模块替换】
- 【Webpack 生产环境配置】近两万字长文总结学习如何提取css为单独文件、css的压缩和兼容性处理，如何压缩html和js、如何做js语法检查eslint和js兼容性处理babel！！！
- 【Webpack 开发环境配置】万字长文总结学习如何打包样式资源、html资源、图片资源和其他资源？devServer是什么，如何配置？
- 【Webpack 简介及五个核心概念】
source-map
本文讲一下开发环境下如何调试代码，解决开发环境下调试代码问题，这个技术叫source-map
source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）
在webpack中启动source-map只需要在配置中添加：devtool: 'source-map'
启动source-map后，打包运行就可以在build目录下看到built.js.map，这个文件就是source-map文件，它提供了源代码和构建后代码的映射关系
上面的写法是source-map最基本的写法
devtool的模式写法可以总结为：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
具体就是有以下几种模式：
1.source-map：外部
错误代码准确信息 和 源代码的错误位置
2.inline-source-map：内联
只生成一个内联source-map
错误代码准确信息 和 源代码的错误位置
3.hidden-source-map：外部
错误代码错误原因，但是没有错误位置
不能追踪源代码错误，只能提示到构建后代码的错误位置
4.eval-source-map：内联
每一个文件都生成对应的source-map，都在eval
错误代码准确信息 和 源代码的错误位置
5.nosources-source-map：外部
错误代码准确信息, 但是没有任何源代码信息
6.cheap-source-map：外部
错误代码准确信息 和 源代码的错误位置
只能精确的行
7.cheap-module-source-map：外部
错误代码准确信息 和 源代码的错误位置
module会将loader的source map加入
上述这些模式，其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的 source map，需要添加到 bundle 中以增加体积为代价，但是对于生产环境，则希望更精准的 source map，需要从 bundle 中分离并独立存在。
我们看一下效果：
devtool: 'inline-source-map'构建后没有built.js.map文件
但是会在built.js文件下面生成base64编码的source-map文件
这种方法是嵌到js中的，所以叫内联，像前面生成外部built.js.map文件的叫外联
内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快
应用场景
前面讲了source-map的很多种配置方案，到底怎么用呢？
这里就需要考虑两种环境：开发环境和生产环境
开发环境：速度快，调试更友好
速度快(eval>inline>cheap>…)：eval-cheap-souce-map(首推)eval-source-map
调试更友好：souce-map(首推)cheap-module-souce-mapcheap-souce-map
最终平衡速度和调试，开发环境推荐的方案：eval-source-map(调试最友好)eval-cheap-module-souce-map(性能更好)
如果我们使用vue或者react框架开发，都会有对应的脚手架，而脚手架的配置默认是：eval-source-map
生产环境：源代码要不要隐藏? 调试要不要更友好？
内联会让代码体积变大，所以在生产环境不用内联
需要隐藏源代码的方案：nosources-source-map(全部隐藏)hidden-source-map(只隐藏源代码，会提示构建后代码错误信息)
生产环境推荐方案：source-map(调试最友好)cheap-module-souce-map(性能更好)
