What's the difference between --devtool source-map & eval-source-map ?
1 Answer
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 🙂