Repository files navigation

Please usehttps://github.com/webpack/webpack/tree/main/examples/source-mapping-url

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

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

importcssfrom"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).

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;},},},],},],},};

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:[/Failedtoparsesourcemap/],};

More information about theignoreWarnings option can be foundhere

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

MIT