CODEWITHSUNDEEP
webpackbabeljssource-maps
Nikolai Prokoschenko
Nikolai Prokoschenko

Reputation: 8755

How do I include the source maps of NPM dependencies in the compiled bundle?

Let's say I have a frontend app compiled with Babel and Webpack to a bundle, which includes a source map of the code I own. However, if I'm looking for a problem in association with third-party dependencies, I would only see their minified code in the browser debugger, since that's what is downloaded from NPM and available on disk. I could only reformat this code automatically, but never see the original code as it was written.

Is there any way to configure the development environment to provide source maps of the dependencies' code in addition to source maps of my code?

Upvotes: 5

Views: 4653

Answers (1)

Mrchief
Mrchief

Reputation: 76218

Try using https://github.com/webpack-contrib/source-map-loader

This loader is especially useful when using 3rd-party libraries having their own source maps. If not extracted and processed into the source map of the webpack bundle, browsers may misinterpret source map data. source-map-loader allows webpack to maintain source map data continuity across libraries so ease of debugging is preserved.

Upvotes: 2

Related Questions