Devtool#

Choose a style of source mapping to enhance the debugging process. These values can affect build and rebuild speed dramatically.

Use the SourceMapDevToolPlugin or EvalSourceMapDevToolPlugin for a more fine grained configuration.

• Type:

type Devtool = 'string' | false;

• Default: eval

Configuration Guide#

Step 1: Determine Debugging Needs#

• Not required → Set devtool: false
  • Disables all debugging information
  • Zero build overhead with maximum build speed
• Required → Proceed to Step 2

Step 2: Define Debugging Requirements#

• Module-level positioning only → Set devtool: 'eval'
  • Each module executed via eval() with //# sourceURL comment
  • Extremely fast build speed
• Full source code mapping needed → Proceed to Step 3

Step 3: Configure SourceMap#

Set devtool: 'source-map', A full SourceMap is emitted as a separate file. It adds a //# sourceMapURL comment to the bundle so development tools know where to find it.

It also supports combination with the following modifiers to improve performance and control SourceMap generation.

Performance optimization modifiers, to speed up the build, usually used in development environments:

Functional modifiers, to control SourceMap generation, usually used in production environments:

We expect a certain pattern when validate devtool name, pay attention and don't mix up the sequence of devtool string. The pattern is: [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map[-debugids].

Recommended configurations#

Development#

The following options are ideal for development:

eval - Each module is executed with eval() and //# 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 (No Source Maps from Loaders).

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.

eval-cheap-source-map - Similar to eval-source-map, each module is executed with eval(). It is "cheap" because it doesn't have column mappings, it only maps line numbers. It ignores SourceMaps from Loaders and only display transpiled code similar to the eval devtool.

eval-cheap-module-source-map - Similar to eval-cheap-source-map, however, in this case Source Maps from Loaders are processed for better results. However Loader Source Maps are simplified to a single mapping per line.

Production#

These options are typically used in production:

'false' - No SourceMap is emitted. This is a good option to start with.

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.

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. You can deploy the Source Map file to the webserver.