webpack（四）devtool

devtool

可以理解为一种代码调试工具，其配置如下
module.exports = {
devtool: ‘source-map’
}

devtool大概有以下几个值，下面是对各个值的作用说明和有无生成外部文件。

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：外部
   错误代码准确信息和源代码的错误位置

内联和外部的区别：1、外部生成了文件，内联没有 2、内联构建速度更快

不同环境下的需求：

1. 开发环境：速度快，调试更友好
   速度快：
   eval-cheap-source-map
   eval-source-map
   调试更友好：
   source-map
   cheap-module-source-map
   cheap-source-map

   推荐使用 eval-source-map / eval-cheap-module-source-map

2. 生产环境：源代码要不要隐藏，调试是否更友好
   内联会让代码体积更大，所以在生产环境不用内联
   nosources-source-map 全部隐藏
   hidden-source-map 只会隐藏源代码，会提示构建后代码错误信息
   推荐使用 source-map / cheap-module-source-map