webpack打包的devTool选项格式的含义如下
| 选项 | 含义 | 优点 | 缺点 | 适用场景 |
| eval | eval 会将每一个module模块，执行eval，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加sourceURL来关联模块处理前后对应的关系 | 速度快 | 由于会映射到转换后的代码，而不是映射到原始代码，所以不能正确的显示行数 | 开发环境 |
| source-map |
source-map会为每一个打包后的模块生成独立的sourcemap文件, 打包后的代码最后面一句代码是 //#sourceMappingURL=bundle.js.map，每个模块生成独立的.map文件 |
精确到行和列的映射 | 速度慢 | 生产环境 |
| inline | 该属性不会生成独立的 .map文件，而是将 .map文件以dataURL的形式插入 | 精确到行和列的映射 | 体积大 | |
| cheap | 只映射到源代码的某一行，不精确到列，可以提升 sourcemap 生成速度 |
体积小 速度稍快 |
不能映射到列 | 生产环境 |
| module | sourcemap 生成时会关联每一步 loader 生成的 sourcemap 和第三方模块的映射，配合 sourcemap-loader 可以映射回最初的源码 | 映射到最初源码 | 生产环境 | |
| nosources |
不生成 sourceContent 内容，可以减小 sourcemap 文件的大小 sourcemap 里是有 sourceContent 部分的，也就是直接把源码贴在这里，这样的好处是根据文件路径查不到文件也可以映射，但这样会增加 sourcemap 的体积。 如果你确定根据文件路径能查找到源文件，那不生成 sourceContent 也行。 |
体积小 | 生产环境 | |
| hidden | 就是生成 sourcemap 但是不关联，即代码最后没有 //#sourceMappingURL=bundle.js.map | 生产环境 |
webpack 也会提示你应该按照什么顺序来组合。
它是按照这个正则来校验的：^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$
最佳实践：
线上的时候当然要启用 hidden，不关联 sourcemap，但要生成 sourcemap，不大需要 module 来映射回最初的源码，所以可能是 hidden-source-map 或者 hidden-cheap-source-map 这种。
开发的时候可以用 eval 的方式，这样是每个模块单独做映射，不用从 bundle.js 开始映射，然后 cheap 也可以开启，只映射到源码的某一行，提升生成速度，一般需要 module 来映射回最初的源码，所以可能是 eval-cheap-module-source-map 这种
参考：
彻底搞懂 Webpack 的 sourcemap 配置原理
理解webpack中的devTool的配置项
一文搞懂SourceMap以及webpack devtool