This option controls if and how source maps are generated.
Choose a style of source mapping to enhance the debugging process. These values can affect build and rebuild speed dramatically.
The webpack repository contains an example showing the effect of all
devtoolvariants. Those examples will likely help you to understand the differences.
oabout the same time
Some of these values are suited for development and some for production. For development you typically want fast Source Maps at the cost of bundle size, but for production you want separate Source Maps that are accurate.
There are some issues with Source Maps in Chrome. We need your help!.
output.sourceMapFilenameto customize the filenames of generated Source Maps.
The following options are ideal for development:
eval - Each module is executed with
//@ sourceURL. This is pretty fast. The main disadvantage is that it doesn't display line numbers correctly since it gets mapped to transpiled code instead of the original code.
inline-source-map - A SourceMap is added as a DataUrl to the bundle.
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.
cheap-eval-source-map - Similar to
eval-source-map, each module is executed with
eval(). However, with this option the Source Map is passed as a Data URL to the
eval() call. It is "cheap" because it doesn't have column mappings, it only maps line numbers.
cheap-module-eval-source-map - Similar to
cheap-eval-source-map, however in this case this case loaders are able to process the mapping for better results.
These options are typically used in production:
source-map - A full SourceMap is emitted as a separate file. It adds a reference comment to the bundle so development tools know where to find it.
hidden-source-map - Same as
source-map, but doesn't add a reference comment to the bundle. Useful if you only want SourceMaps to map error stack traces from error reports, but don't want to expose your SourceMap for the browser development tools.
cheap-source-map - A SourceMap without column-mappings ignoring loaded Source Maps.
cheap-module-source-map - A SourceMap without column-mappings that simplifies loaded Source Maps to a single mapping per line.
nosources-source-map - A SourceMap is created without the
sourcesContent in it. It can be used to map stack traces on the client without exposing all of the source code.