Security News
vlt Debuts New JavaScript Package Manager and Serverless Registry at NodeConf EU
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
source-map-loader
Advanced tools
The source-map-loader package is used to load source map data from existing source files. It extracts source maps from the source files (like JavaScript files) when they are included in the webpack build process. This allows for better debugging capabilities because the browser developer tools can map the generated code back to the original source code, which is particularly useful when working with transpiled languages or minified code.
Extracting source maps
This webpack configuration snippet demonstrates how to use source-map-loader to extract source maps from JavaScript files before they are processed by other loaders. The 'enforce: pre' property ensures that the source-map-loader runs before other loaders.
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: ['source-map-loader'],
enforce: 'pre'
}
]
}
};
The source-map-support package provides source map support for stack traces in node applications. It allows error stack traces to be translated back to the original source code. Unlike source-map-loader, which is used during the build process, source-map-support is used at runtime.
The babel-loader is a webpack loader that transpiles JavaScript files using Babel and can optionally generate source maps. While it serves a different primary purpose (transpilation), the generation of source maps is a feature that overlaps with source-map-loader's functionality.
The css-loader interprets `@import` and `url()` like import/require() and resolves them. It can also generate source maps for CSS files, which is a feature that is somewhat similar to what source-map-loader does for JavaScript files.
Extracts source maps from existing source files (from their sourceMappingURL
).
To begin, you'll need to install source-map-loader
:
npm i -D source-map-loader
Then add the plugin to your webpack
config. For example:
file.js
import css from "file.css";
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
enforce: "pre",
use: ["source-map-loader"],
},
],
},
};
The source-map-loader
extracts existing source maps from all JavaScript entries.
This includes both inline source maps as well as those linked via URL.
All source map data is passed to webpack for processing as per a chosen source map style specified by the devtool
option in webpack.config.js.
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.
The source-map-loader
will extract from any JavaScript file, including those in the node_modules
directory.
Be mindful in setting include and exclude rule conditions to maximize bundling performance.
And run webpack
via your preferred method.
Name | Type | Default | Description |
---|---|---|---|
filterSourceMappingUrl | {Function} | undefined | Allows to control SourceMappingURL behaviour |
Type: Function
Default: undefined
Allows you to specify the behavior of the loader for SourceMappingURL
comment.
The function must return one of the values:
true
or 'consume'
- consume the source map and remove SourceMappingURL
comment (default behavior)false
or 'remove'
- do not consume the source map and remove SourceMappingURL
commentskip
- do not consume the source map and do not remove SourceMappingURL
commentExample 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)) {
return false;
}
if (/keep-source-mapping-url\.js$/i.test(resourcePath)) {
return "skip";
}
return true;
},
},
},
],
},
],
},
};
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 the ignoreWarnings
option can be found here
Please take a moment to read our contributing guidelines if you haven't yet done so.
FAQs
extracts inlined source map and offers it to webpack
The npm package source-map-loader receives a total of 5,326,845 weekly downloads. As such, source-map-loader popularity was classified as popular.
We found that source-map-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.