The documentation from isn't clear enough. I have been searching around for my detailed explanations with no luck.
What are the difference between all these devtool options ?
eval - Each module is executed with eval and //@ sourceURL.
source-map - A SourceMap is emitted. See also output.sourceMapFilename.
hidden-source-map - Same as source-map, but doesn’t add a reference comment to the bundle.
inline-source-map - A SourceMap is added as DataUrl to the JavaScript file.
eval-source-map - Each module is executed with eval and a SourceMap is added as DataUrl to the eval.
cheap-source-map - A SourceMap without column-mappings. SourceMaps from loaders are not used.
cheap-module-source-map - A SourceMap without column-mappings. SourceMaps from loaders are simplified to a single mapping per line.
I have tested out every option and see what are the differences. Many of time there are no difference in the end result. And some of them does not give the right result. For example, with Babel and ES6 code, the right line# and column# for ES6 code are given but Chrome shows ES5 code instead. These led to no answer to my original questions.
I really want to know the use cases is for each of the devtool options.