Extracts source maps from existing source files (from their<code>sourceMappingURL</code>).

Getting Started

To begin, you'll need to installsource-map-loader:

npm i -D source-map-loader

or

yarn add -D source-map-loader

or

pnpm add -D source-map-loader

Then add the loader to yourwebpack configuration. For example:

file.js

import cssfrom"file.css";

webpack.config.js

module.exports={  module:{    rules:[{        test:/\.js$/,        enforce:"pre",        use:["source-map-loader"],},],},};

Thesource-map-loader extracts existing source maps from all JavaScript entries.This includes both inline source maps as well as those linked via asourceMappingURL.

All source map data is passed to webpack for processing as per a chosensource map style specified by thedevtool option inwebpack.config.js.

This loader is especially useful when using third-party libraries having their own source maps.If not extracted and processed into the source map of the webpack bundle, browsers may misinterpret or ignore source map data.

Thesource-map-loader allows webpack to maintain source map data continuity across libraries so ease of debugging is preserved.

Thesource-map-loader will extract from any JavaScript file, including those in thenode_modules directory.

Be mindful in settinginclude andexclude rule conditions to maximize bundling performance.

Finally, runwebpack using the method you normally use (e.g., via CLI or an npm script).

Options

filterSourceMappingUrl

Type:FunctionDefault:undefined

Allows you to specify the behavior of the loader forSourceMappingURL comment.

The function must return one of the following values:

• true or'consume' - consume the source map and removeSourceMappingURL comment (default behavior)
• false or'remove' - do not consume the source map and removeSourceMappingURL comment
• skip - do not consume the source map and do not removeSourceMappingURL comment

Example configuration:

webpack.config.js

module.exports={  module:{    rules:[{        test:/\.js$/,        enforce:"pre",        use:[{            loader:"source-map-loader",            options:{filterSourceMappingUrl:(url, resourcePath)=>{if(/broker-source-map-url\.js$/i.test(url)){returnfalse;}if(/keep-source-mapping-url\.js$/i.test(resourcePath)){return"skip";}returntrue;},},},],},],},};

Examples

Ignoring Warnings

To ignore warnings, you can use the following configuration:

webpack.config.js

module.exports={  module:{    rules:[{        test:/\.js$/,        enforce:"pre",        use:["source-map-loader"],},],},  ignoreWarnings:[/Failed to parse source map/],};

More information about theignoreWarnings option can be foundhere

Contributing

We welcome all contributions!If you're new here, please take a moment to review our contributing guidelines before submitting issues or pull requests.

CONTRIBUTING

License

MIT