This option controls if and how source maps are generated.Use theSourceMapDevToolPlugin for a more fine grained configuration. See theRule.extractSourceMap to deal with existing source maps.

devtool

string = 'eval'Array<{ type: "all" | "javascript" | "css", use: string }>false

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

You can also provide an array of objects to configure different source map styles for different asset types:

webpack.config.js

module.exports={// ...  devtool:[{ type:"javascript", use:"source-map"},{ type:"css", use:"inline-source-map"},],};

Thetype field specifies which asset type should receive the devtool value:

• "all" - applies to all asset types (JavaScript and CSS)
• "javascript" - applies only to JavaScript files
• "css" - applies only to CSS files

When using an array, each entry will be processed in order. If you provide a string value, it will be treated as{ type: "all", use: "your-string-value" }.

The webpack repository contains anexample showing the effect of alldevtool variants. Those examples will likely help you to understand the differences.

Seeoutput.sourceMapFilename to customize the filenames of generated Source Maps.

Qualities

bundled code - You see all generated code as a big blob of code. You don't see modules separated from each other.

generated code - You see each module separated from each other, annotated with module names. You see the code generated by webpack. Example: Instead ofimport {test} from "module"; test(); you see something likevar module__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(42); module__WEBPACK_IMPORTED_MODULE_1__.a();.

transformed code - You see each module separated from each other, annotated with module names. You see the code before webpack transforms it, but after Loaders transpile it. Example: Instead ofimport {test} from "module"; class A extends test {} you see something likeimport {test} from "module"; var A = function(_test) { ... }(test);

original source - You see each module separated from each other, annotated with module names. You see the code before transpilation, as you authored it. This depends on Loader support.

without source content - Contents for the sources are not included in the Source Maps. Browsers usually try to load the source from the webserver or filesystem. You have to make sure to setoutput.devtoolModuleFilenameTemplate correctly to match source urls.

(lines only) - Source Maps are simplified to a single mapping per line. This usually means a single mapping per statement (assuming you author it 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.

Development

The following options are ideal for development:

eval - Each module is executed witheval() 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 witheval() and a SourceMap is added as a DataUrl to theeval(). 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 toeval-source-map, each module is executed witheval(). 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 theeval devtool.

eval-cheap-module-source-map - Similar toeval-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.

Special cases

The following options are not ideal for development nor production. They are needed for some special cases, i. e. for some 3rd party tools.

inline-source-map - A SourceMap is added as a DataUrl to the bundle.

cheap-source-map - A SourceMap without column-mappings ignoring loader Source Maps.

inline-cheap-source-map - Similar tocheap-source-map but SourceMap is added as a DataUrl to the bundle.

cheap-module-source-map - A SourceMap without column-mappings that simplifies loader Source Maps to a single mapping per line.

inline-cheap-module-source-map - Similar tocheap-module-source-map but SourceMap is added as a DataUrl to the bundle.

Production

These options are typically used in production:

(none) (Omit thedevtool option or setdevtool: 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.

Further Reading

• Enabling Source Maps
• webpack's Devtool Source Map

8 Contributors