Menu
What's the difference between --devtool source-map & eval-source-map ?
965
Source Maps The Chrome dev tools support source maps, which allow you to debug transpiled JavaScript code as their original source language. This may include TypeScript, CoffeeScript, ClojureScript, or ECMAScript 6.
Using Webpack, specifying devtool: "source-map" in your Webpack config will enable source maps, and Webpack will output a sourceMappingURL directive in your final, minified file. You can customize the source map filename itself by specifying sourceMapFilename .
hidden-source-map is the same as source-map except it doesn't write references to the source maps to the source files. If you don't want to expose source maps to development tools directly while you wish proper stack traces, this is handy.
They hold the original sources of your code and helps in debugging your code live. With source maps, you can click on a certain line and column number in your generated JavaScript, and that will do a lookup in the source map which will return the original location.
The webpack docs have a handy chart about which cases these different options may be suited for though.
They show eval-source-map as being slow on builds and fast on rebuilds, and recommended for development but for production as "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."
On the other hand, source-map is slow on both build and rebuild, but tagged as suited for production because "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."
Based on this other SO post Webpack - devtool: source-map for CSS and eval-source-map for JS? it looks like this person has better luck using source-map for CSS file mapping whereas eval-source-map is more helpful for JS files. I can't tell if this is true for all use cases though as the webpack docs don't explicitly speak to a difference here, and eval-source-map has historically worked for my use case in development for both CSS and JS.
The answers to the linked post do show how to use both options if desired 🙂
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
