URL: Detailed explanation of webpack's devtool
The development environment is recommended to use:
1.eval: Each module is executed using eval() and //@sourceURL. It's very fast. The main downside is that it doesn't show the line number correctly because it is mapped to the transpiled code instead of the original code (there is no source map from the loader).
2.eval-source-map: Each module is executed using eval(), and SourceMap is added to eval() as DataUrl. Initially it is slow, but it provides fast rebuild speed and produces realistic files. The line number is mapped correctly as it was mapped to the original code. It produces the highest quality development resources.
3.cheap-eval-source-map: Similar to eval-source-map, each module is executed using eval(). It doesn't map columns, it only maps row numbers. It ignores source code from loaders and only shows transformed code similar to eval devtool.
4. cheap-module-eval-source-map: Similar to cheap-eval-source-map, in this case source maps from loaders are processed for better results. However, loader source maps are reduced to a single map per line.
Production environment is recommended to use:
1.(none): (devtool option omitted) - Does not trigger SourceMap. This is a great option.
2.source-map: A complete SourceMap is as a separate file. It adds a reference annotation to the bundle, so the development tools know where to find it.
3.hidden-source-map: Same as source-map, but does not add reference annotations to the bundle. Use this option if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMaps for browser development tools.
4. nosources-source-map: A SourceMap is created without source code. It can be used to map stack traces on client machines without exposing all source code. You can deploy source map files to webserver.