webpack-sources

What is webpack-sources?

The webpack-sources package provides utility functions to manage source code and SourceMap data for webpack. It allows manipulation of the source code of modules and the generation of SourceMaps for better debugging support.

What are webpack-sources's main functionalities?

RawSource

RawSource is used to represent source code that does not need a SourceMap because it's not transformed.

const { RawSource } = require('webpack-sources');
const source = new RawSource('const a = 1;');
console.log(source.source());

SourceMapSource

SourceMapSource is used when the source code has an associated SourceMap. It is useful for preserving source maps through transformations.

const { SourceMapSource } = require('webpack-sources');
const source = new SourceMapSource('const a = 1;', 'file.js', '{"version":3,"sources":["file.js"],"names":["a"],"mappings":"AAAA,MAAM,IAAI"}');
console.log(source.sourceAndMap());

OriginalSource

OriginalSource is used for representing original source code that will be transformed. It generates a SourceMap for the original code.

const { OriginalSource } = require('webpack-sources');
const source = new OriginalSource('const a = 1;', 'file.js');
console.log(source.source());

ReplaceSource

ReplaceSource allows modifications to the source code, such as replacing certain parts of it, while keeping track of changes for SourceMap generation.

const { ReplaceSource, OriginalSource } = require('webpack-sources');
const originalSource = new OriginalSource('const a = 1;', 'file.js');
const replaceSource = new ReplaceSource(originalSource);
replaceSource.replace(0, 10, 'const b = 2;');
console.log(replaceSource.source());

ConcatSource

ConcatSource is used to concatenate multiple sources into a single source. It is useful for combining multiple assets into one.

const { ConcatSource, RawSource } = require('webpack-sources');
const source1 = new RawSource('const a = 1;');
const source2 = new RawSource('\nconst b = 2;');
const concatenatedSource = new ConcatSource(source1, source2);
console.log(concatenatedSource.source());

Other packages similar to webpack-sources

source-map

The 'source-map' package provides utilities for generating and consuming source maps. It is similar to webpack-sources but is not specific to webpack and can be used in any JavaScript project.

combine-source-map

The 'combine-source-map' package is used for creating a single source map out of multiple source maps. It is similar to the ConcatSource feature of webpack-sources but focuses solely on source maps.

magic-string

The 'magic-string' package provides methods to edit strings (like code) and generate source maps. It is similar to ReplaceSource in webpack-sources but offers a different API and additional functionality for string manipulation.

README

webpack-sources

Contains multiple classes which represent a Source. A Source can be asked for source code, size, source map and hash.

Source

Base class for all sources.

Public methods

All methods should be considered as expensive as they may need to do computations.

source

Source.prototype.source() -> String | Buffer

Returns the represented source code as string or Buffer (for binary Sources).

buffer

Source.prototype.buffer() -> Buffer

Returns the represented source code as Buffer. Strings are converted to utf-8.

size

Source.prototype.size() -> Number

Returns the size in bytes of the represented source code.

map

Source.prototype.map(options?: Object) -> Object | null

Returns the SourceMap of the represented source code as JSON. May return null if no SourceMap is available.

The options object can contain the following keys:

• columns: Boolean (default true): If set to false the implementation may omit mappings for columns.
• module: Boolean (default true): If set to false the implementation may omit inner mappings for modules.

sourceAndMap

Source.prototype.sourceAndMap(options?: Object) -> {
	source: String | Buffer,
	map: Object
}

Returns both, source code (like Source.prototype.source() and SourceMap (like Source.prototype.map()). This method could have better performance than calling source() and map() separately.

See map() for options.

updateHash

Source.prototype.updateHash(hash: Hash) -> void

Updates the provided Hash object with the content of the represented source code. (Hash is an object with an update method, which is called with string values)

RawSource

Represents source code without SourceMap.

new RawSource(sourceCode: String)

OriginalSource

Represents source code, which is a copy of the original file.

new OriginalSource(
	sourceCode: String,
	name: String
)

• sourceCode: The source code.
• name: The filename of the original source code.

OriginalSource tries to create column mappings if requested, by splitting the source code at typical statement borders (;, {, }).

SourceMapSource

Represents source code with SourceMap, optionally having an additional SourceMap for the original source.

new SourceMapSource(
	sourceCode: String,
	name: String,
	sourceMap: Object | String,
	originalSource?: String,
	innerSourceMap?: Object | String
)

• sourceCode: The source code.
• name: The filename of the original source code.
• sourceMap: The SourceMap for the source code.
• originalSource: The source code of the original file. Can be omitted if the sourceMap already contains the original source code.
• innerSourceMap: The SourceMap for the originalSource/name.

CachedSource

Decorates a Source and caches returned results of map, source, buffer, size and sourceAndMap in memory. updateHash is not cached. It tries to reused cached results from other methods to avoid calculations, i. e. when source is already cached, calling size will get the size from the cached source, calling sourceAndMap will only call map on the wrapped Source.

new CachedSource(source: Source)

PrefixSource

Prefix every line of the decorated Source with a provided string.

new PrefixSource(
	prefix: String,
	source: Source
)

ConcatSource

Concatenate multiple Sources or strings to a single source.

new ConcatSource(
	...items?: Source | String
)

Public methods

add

ConcatSource.prototype.add(item: Source | String)

Adds an item to the source.

ReplaceSource

Decorates a Source with replacements and insertions of source code.

Public methods

replace

ReplaceSource.prototype.replace(
	start: Number,
	end: Number,
	replacement: String
)

Replaces chars from start (0-indexed, inclusive) to end (0-indexed, inclusive) with replacement.

Locations represents locations in the original source and are not influenced by other replacements or insertions.

insert

ReplaceSource.prototype.insert(
	pos: Number,
	insertion: String
)

Inserts the insertion before char pos (0-indexed).

Location represents location in the original source and is not influenced by other replacements or insertions.

original

Get decorated Source.