source-map是什么？
source-map是webpack提供最好的几个功能之一，是为了提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码的错误）
如何使用
module.exports = {
entry: '',
output: {},
module:{},
plugins: [],
mode: 'development',
devServer: {},
// 使用 source-map
devtool: 'eval-source-map'
}
source-map有哪些模式
- source-map: 外部
- 错误代码准确信息 和 源代码的错误位置
- inline-source-map: 内联
- 只生成一个内联source-map
- 错误代码准确信息 和 源代码的错误位置
- hidden-source-map: 外部
- 错误代码的错误原因，但是没有提示错误位置
- 不追踪源代码的错误，只能提示到构建后代码的错误位置
- eval-source-map: 内联
- 每一个文件都生成对应的source-map，都在eval
- 错误代码准确信息 和 源代码的错误位置
- nosource-source-map: 外部
- 错误代码准确信息，但是没有人任何源代码信息
- cheap-source-map: 外部
- 错误代码准确信息 和 源代码的错误位置
- 只能精确到行，但是不能精确到行的哪一块出错
- cheap-module-source-map: 外部
- 错误代码准确信息 和 源代码的错误位置
- module会将loader的source-map加入
PS：
内联和外部的区别：
- 外部生成了文件，内联没有
- 内联构建速度更快
开发环境和生产环境选择
- 开发环境：速度快，调试友好
-
速度快（eval>inline>cheap>...）
- eval-cheap-source-map 这个组合最快
- eval-source-map
-
调试更友好
- source-map
- cheap-module-source-map
- cheap-source-map
一般开发环境用 eval-source-map
-
- 生产环境：源代码要不要隐藏，调试要不要友好
内联会让体积变大，所以生产环境不要用内联
nosource-source-map: 全部代码隐藏
hidden-source-map: 只隐藏源代码，会提示构建后代码错误信息
一般生产环境用 source-map
