@types/loader-utils

What is @types/loader-utils?

@types/loader-utils provides TypeScript type definitions for the loader-utils package, which is a collection of utilities for webpack loaders.

What are @types/loader-utils's main functionalities?

getOptions

The getOptions function retrieves the options passed to the loader. This is useful for customizing the behavior of the loader based on user-provided options.

const loaderUtils = require('loader-utils');
const options = loaderUtils.getOptions(this);

interpolateName

The interpolateName function generates a filename based on a given pattern and the content of the file. This is useful for creating unique filenames for output files.

const loaderUtils = require('loader-utils');
const interpolatedName = loaderUtils.interpolateName(this, '[name].[ext]', { content: 'file content' });

parseQuery

The parseQuery function parses a query string into an object. This is useful for extracting parameters from a query string.

const loaderUtils = require('loader-utils');
const query = loaderUtils.parseQuery('?name=test&age=30');

stringifyRequest

The stringifyRequest function converts a request to a string that can be used in require or import statements. This is useful for dynamically generating module paths.

const loaderUtils = require('loader-utils');
const request = loaderUtils.stringifyRequest(this, './path/to/module');

Other packages similar to @types/loader-utils

schema-utils

schema-utils provides utilities for validating options against JSON schemas. It is often used in webpack loaders and plugins to ensure that user-provided options are valid. Unlike loader-utils, which provides a variety of utilities, schema-utils focuses specifically on schema validation.

webpack-merge

webpack-merge provides utilities for merging webpack configurations. It is useful for combining multiple configuration objects into a single configuration. While loader-utils focuses on utilities for loaders, webpack-merge is specifically designed for merging configurations.

enhanced-resolve

enhanced-resolve is a resolver library used by webpack to resolve module paths. It provides advanced resolution capabilities such as aliasing and custom plugins. Unlike loader-utils, which provides general utilities for loaders, enhanced-resolve focuses on module resolution.

README

Installation

npm install --save @types/loader-utils

Summary

This package contains type definitions for loader-utils (https://github.com/webpack/loader-utils#readme).

Details

Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/loader-utils.

index.d.ts

/// <reference types="node" />

import { loader } from "webpack";

export type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

export interface InterpolateOption {
    context?: string | undefined;
    content?: string | Buffer | undefined;
    regExp?: string | RegExp | undefined;
}

export interface OptionObject {
    [key: string]: null | false | true | string;
}

export type HashType = "sha1" | "md4" | "md5" | "sha256" | "sha512";

export type DigestType = "hex" | "base26" | "base32" | "base36" | "base49" | "base52" | "base58" | "base62" | "base64";

/**
 * Recommended way to retrieve the options of a loader invocation
 * {@link https://github.com/webpack/loader-utils#getoptions}
 */
export function getOptions(loaderContext: loader.LoaderContext): Readonly<OptionObject>;

/**
 * Parses a passed string (e.g. loaderContext.resourceQuery) as a query string, and returns an object.
 * {@link https://github.com/webpack/loader-utils#parsequery}
 */
export function parseQuery(optionString: string): OptionObject;

/**
 * Turns a request into a string that can be used inside require() or import while avoiding absolute paths. Use it instead of JSON.stringify(...) if you're generating code inside a loader.
 * {@link https://github.com/webpack/loader-utils#stringifyrequest}
 */
export function stringifyRequest(loaderContext: loader.LoaderContext, resource: string): string;

export function getRemainingRequest(loaderContext: loader.LoaderContext): string;

export function getCurrentRequest(loaderContext: loader.LoaderContext): string;

export function isUrlRequest(url: string, root?: string): boolean;

export function parseString(str: string): string;

/**
 * Converts some resource URL to a webpack module request.
 * {@link https://github.com/webpack/loader-utils#urltorequest}
 */
export function urlToRequest(url: string, root?: string): string;

/**
 * Interpolates a filename template using multiple placeholders and/or a regular expression.
 * The template and regular expression are set as query params called name and regExp on the current loader's context.
 * {@link https://github.com/webpack/loader-utils#interpolatename}
 */
export function interpolateName(loaderContext: loader.LoaderContext, name: string, options?: any): string;

/**
 * @param buffer
 * @param [hashType='md4']
 * @param [digestType='hex']
 * @param [maxLength=9999]
 */
export function getHashDigest(buffer: Buffer, hashType: HashType, digestType: DigestType, maxLength: number): string;

Additional Details

• Last updated: Tue, 07 Nov 2023 20:08:00 GMT
• Dependencies: @types/node, @types/webpack

Credits

These definitions were written by Gyusun Yeom, Totooria Hyperion, Piotr Błażejewicz, and Jesse Katsumata.