devtool
官方表格：
| devtool | build | rebuild | production | quality |
|---|---|---|---|---|
| (none) | +++ | +++ | yes | bundled code |
| eval | +++ | +++ | no | generated code |
| cheap-eval-source-map | + | ++ | no | transformed code (lines only) |
| cheap-module-eval-source-map | o | ++ | no | original source (lines only) |
| eval-source-map | -- | + | no | original source |
| cheap-source-map | + | o | no | transformed code (lines only) |
| cheap-module-source-map | o | - | no | original source (lines only) |
| inline-cheap-source-map | + | o | no | transformed code (lines only) |
| inline-cheap-module-source-map | o | - | no | original source (lines only) |
| source-map | -- | -- | yes | original source |
| inline-source-map | -- | -- | no | original source |
| hidden-source-map | -- | -- | yes | original source |
| nosources-source-map | -- | -- | yes | without source content |
+++super fast,++fast,+pretty fast,omedium,-pretty slow,--slow
关于 quality 的说明：
bundled code在开发者工具中会直接看到最终生成的合并过后的超大 js ，而不会看到按照源码分离的模块。generated code能够看到按源码分离的各个模块，模块内容是 webpack 处理后的。比如，如果源码里面是import {test} from "module";，那么在开发者工具中看到的大致是var module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();。transformed code能够看到按源码分离的各个模块，看到的模块内容是经过 loaders 处理之后的，但是未经过 webpack 处理的代码。比如，如果源码中是import {test} from "module"; class A extends test {}，那么此处看到的是import {test} from "module"; var A = function(_test) { ... }(test);。original source能够看到按源码分离的各个模块，看到的模块内容是编译转换之前的，和源码里面的一致。这个需要 loader 支持，如果某个模块经过的某个 loader 没有正确处理 Source Map ，那么最终生成的代码是无法正确映射到源码上的。without source contentSource Map 不包含源码内容。通常浏览器会尝试从 web 服务器或者文件系统中加载源码，此时必须确保设置了正确的output.devtoolModuleFilenameTemplate。(lines only)Source Map 被简化为每行一个映射。这通常意味着每个语句只有一个映射（假设你使用这种方式）。这会妨碍你在语句级别上调试执行，也会妨碍你在每行的一些列上设置断点。与压缩后的代码组合后，映射关系是不可能实现的，因为压缩工具通常只会输出一行。
