Skip to content
Search

Source Map

lastmod 2021-07-09created 2021-07-083 edits

A source map is a feature that links files built for deployment with the original files. Usually, when deploying to a server, web resources such as HTML, CSS, and JS are minified for performance optimization. But if an error occurs in a file that was minified and deployed, how can you debug it?

The answer is to use a source map to check which part of the original source a specific part of the deployed file corresponds to. The source map is what provides this convenience.

Configuration

Here is how to configure source maps in webpack. 

// webpack.config.js
module.exports = {
  devtool: 'cheap-eval-source-map'
}

Settings by situation

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 line numbers are not displayed correctly, since it maps to transpiled code instead of the original code. (No source maps from loaders)
eval-source-map
Each module is executed with eval() and a source map is added to eval() as a DataUrl. Initially slow, but provides fast rebuilds and yields real files. Line numbers are correctly mapped since they are mapped to the original code. Yields the highest-quality source maps for development.
eval-cheap-source-map
Similar to eval-source-map, each module is executed with eval(). It is "cheap" because it has no column mappings and only maps line numbers. It ignores source maps from loaders and only shows transpiled code, similar to the eval devtool.
eval-cheap-module-source-map
Similar to eval-cheap-source-map, but in this case source maps from loaders are used 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 or production. They are needed for special cases, such as when using third-party tools.

inline-source-map
Adds the source map to the bundle as a DataUrl.
cheap-source-map
A source map without column mappings that ignores loader source maps.
inline-cheap-source-map
Similar to cheap-source-map, but adds the source map to the bundle as a DataUrl.
cheap-module-source-map
A source map without column mappings that simplifies loader source maps to a single mapping per line.
inline-cheap-module-source-map
Similar to cheap-module-source-map, but adds the source map to the bundle as a DataUrl.

Production

The following options are typically used in production.

(none) (devtool option omitted)
No source map is emitted. This is a good option to start with.
source-map
Emits a full source map as a separate file. Adds a reference comment to the bundle so development tools can find it.
hidden-source-map
Same as source-map, but does not add a reference comment to the bundle. Useful if you only want source maps to map error stack traces from error reports, without exposing the source map to browser development tools.
nosources-source-map
A source map is created without sourcesContent. 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 web server.

See also

Favorite site

author Zer0 sitemap