source-map-loader

What is source-map-loader?

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.

What are source-map-loader's main functionalities?

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

Other packages similar to source-map-loader

source-map-support

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.

babel-loader

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.

css-loader

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.

README

Sourcemap Loader

Extracts SourceMaps for source files that as added as `sourceMappingURL` comment.

Install

npm i -D source-map-loader

Usage

Documentation: Using loaders

Example webpack config

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

This extracts SourceMaps from all js files (including node_modules). This is not very performant, so you may want to only apply the loader to relevant files.

Maintainers

Juho Vepsäläinen

Joshua Wiens

Kees Kluskens

Sean Larkin

Changelog

0.2.0 (2017-03-10)

Bug Fixes

• Load source map only from last directive (#31) (eabfc7e)

Features

• allow charset in inline-source-map support (#21) (2730ccb)