ECMAScript source map

A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.
Basically it's a way to map a combined/minified file back to an unbuilt state.

To enable the debugger to work with a source map, you must:

• generate the source map
• include a comment in the transformed file, that points to the source map. The comment's syntax is like this:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

以下 Development 模式下 source map不单独生成文件

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.
• cheap-eval-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.
• cheap-module-eval-source-map - Similar to cheap-eval-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

• 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.

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 of import {test} from "module"; test(); you see something like var 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 of import {test} from "module"; class A extends test {} you see something like import {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 set output.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 is 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.

项目试验

index.ts

50    const [ m, n ]:any[] = [ 1, null];
51    const test = n.word;  //故意出错

devtool: 'eval'

• quality: generated code

index.ts:64 Uncaught TypeError: Cannot read property 'word' of null 

61            var m = 1,
62                n = null;

64            var test = n.word;

有column信息

devtool: 'eval-source-map'

• quality: original source

index.ts?2e17:51 Uncaught TypeError: Cannot read property 'word' of null

50    const [ m, n ]:any[] = [ 1, null];
51    const test = n.word;

有column信息

devtool: 'cheap-eval-source-map'

• quality: transformed code (lines only)

index.ts?f5f1:64 Uncaught TypeError: Cannot read property 'word' of null
           
61            var m = 1,
62                n = null;

64            var test = n.word;

没有column信息

devtool: 'cheap-module-eval-source-map'

• quality: original source (lines only)

index.ts?2e17:51 Uncaught TypeError: Cannot read property 'word' of null
    
50    const [ m, n ]:any[] = [ 1, null];
51    const test = n.word;

没有column信息

devtool: 'source-map'

• quality: original source

index.ts:51 Uncaught TypeError: Cannot read property 'word' of null

50    const [ m, n ]:any[] = [ 1, null];
51    const test = n.word; 

有column信息

devtool: 'hidden-source-map'

• quality: original source

safe-string.js:10 Uncaught TypeError: Cannot read property 'word' of null

10    export default SafeString;

devtool: 'nosources-source-map'

• quality: without source content

index.ts:51 Uncaught TypeError: Cannot read property 'word' of null

没有源码

其他参考

Webpack devtool source map