如何优雅地使用webpack的devtool进行debug？

[FrankKai]

devtool: 'cheap-module-source-map'
devtool: 'source-map'

修改为source-map以后，可以在sources的src目录下查看未经编译的.vue结尾的但是未经编译的源码，方便我们调试。

为什么？source-map仅仅比cheap-module-source-map多了一个(lines only)的限制，那么lines only是一个什么限制呢？

(lines only) - Source Maps are simplified to a single mapping per line. This usually means a single mapping per statement (assuming you author is this way). This prevents you from debugging execution on statement level and from settings breakpoints on columns of a line. Combining with minimizing is not possible as minimizers usually only emit a single line.

其中关键是这句” This prevents you from debugging execution on statement level and from settings breakpoints on columns of a line.”，这将会阻止你在语句级别以及某行某列出打debug的执行，说得通俗一定一点，那就是：”打不了断点”。

有没有一种放出源代码但是编译又快的选项？

Let’s try it .

1.none

//devtool: ‘none’

什么都没发生，只有捆绑好的style.css，main.js和vendors.js。

2.eval

devtool:’eval’

除捆绑好的文件外，主要多了webpack://，用来存放webpack生成后的代码。

3.cheap-eval-source-map

devtool:’cheap-eval-source-map’

除捆绑好的文件和webpack://外，主要多了webpack-internal://,其中存放了大量的数字编号编译后的文件。

4.cheap-module-eval-source-map

devtool:”cheap-module-eval-source-map"

在webpack://下，多了src目录，其中存放了项目的源代码，但是其中代码都是经过编译之后的。

5.eval-source-map

devtool:”eval-source-map"

与cheap-module-eval-source-map最大的区别在于，src中的代码，是编译前的形式，可以进行debug。

6.cheap-source-map

devtool:”cheap-source-map”

目前只知道与cheap-eval-source-map很像。

7.cheap-module-source-map

devtool:”cheap-module-source-map”

目前只知道与cheap-module-eval-source-map很像。

8.inline-cheap-source-map

devtool:”inline-cheap-source-map”

目前只知道与cheap-source-map很像。

9.inline-cheap-module-source-map

devtool:”inline-cheap-module-source-map”

目前只知道与cheap-module-source-map很像。

10.source-map

devtool:”source-map”

目前只知道与eval-source-map很像。

11.inline-source-map

devtool:”inline-source-map”

目前只知道与source-map 很像。

12.hidden-source-map

devtool:”hidden-source-map”

webpack://文件夹消失。

13.nosources-source-map

devtool:”nosources-source-map”

src文件夹下的部分.vue后缀的文件内容为空

经过上述的实验，其实我们能总结出一些重点：
1.代码质量分为bundled code，generated code，transformed code，original source以及without source content。
2.只有代码质量为original source，并且没有lines only选项的代码才能打断点做调试。
3.eval-source-map适用于开发环境下做调试，而且比source-map的rebuild速度更快
4.出于安全性考虑，生产环境下不建议调试，设置为none合适

eval-source-map比source-map好在哪里？

eval-source-map - Each module is executed with eval() and a SourceMap is added as a DataUrl >to the eval(). Initially it is slow, but it provides fast rebuild speed and yields real files. Line >numbers are correctly mapped since it gets mapped to the original code. It yields the best quality >SourceMaps for development.
https://webpack.js.org/configuration/devtool/