GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — GitHub - webpack/loader-utils: utils for webpack loaders

This repository was archived by the owner on Dec 17, 2025. It is now read-only.
BranchesTags
Open more actions menu

Latest commit

 

History

256 Commits
256 Commits

Folders and files

NameName
Last commit message
Last commit date
.github
.github
 
 
lib
lib
 
 
test
test
 
 
.editorconfig
.editorconfig
 
 
.eslintrc.json
.eslintrc.json
 
 
.gitattributes
.gitattributes
 
 
.gitignore
.gitignore
 
 
.prettierignore
.prettierignore
 
 
CHANGELOG.md
CHANGELOG.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
SECURITY.md
SECURITY.md
 
 
package.json
package.json
 
 
yarn.lock
yarn.lock
 
 

Repository files navigation

loader-utils

Methods

urlToRequest

Converts some resource URL to a webpack module request.

i Before call urlToRequest you need call isUrlRequest to ensure it is requestable url

const url = "path/to/module.js";

if (loaderUtils.isUrlRequest(url)) {
  // Logic for requestable url
  const request = loaderUtils.urlToRequest(url);
} else {
  // Logic for not requestable url
}

Simple example:

const url = "path/to/module.js";
const request = loaderUtils.urlToRequest(url); // "./path/to/module.js"

Module URLs

Any URL containing a ~ will be interpreted as a module request. Anything after the ~ will be considered the request path.

const url = "~path/to/module.js";
const request = loaderUtils.urlToRequest(url); // "path/to/module.js"

Root-relative URLs

URLs that are root-relative (start with /) can be resolved relative to some arbitrary path by using the root parameter:

const url = "/path/to/module.js";
const root = "./root";
const request = loaderUtils.urlToRequest(url, root); // "./root/path/to/module.js"

To convert a root-relative URL into a module URL, specify a root value that starts with ~:

const url = "/path/to/module.js";
const root = "~";
const request = loaderUtils.urlToRequest(url, root); // "path/to/module.js"

interpolateName

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.

const interpolatedName = loaderUtils.interpolateName(
  loaderContext,
  name,
  options
);

The following tokens are replaced in the name parameter:

  • [ext] the extension of the resource
  • [name] the basename of the resource
  • [path] the path of the resource relative to the context query parameter or option.
  • [folder] the folder the resource is in
  • [query] the queryof the resource, i.e. ?foo=bar
  • [contenthash] the hash of options.content (Buffer) (by default it's the hex digest of the xxhash64 hash)
  • [<hashType>:contenthash:<digestType>:<length>] optionally one can configure
    • other hashTypes, i. e. xxhash64, sha1, md4 (wasm version), native-md4 (crypto module version), md5, sha256, sha512
    • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64, base64safe
    • and length the length in chars
  • [hash] the hash of options.content (Buffer) (by default it's the hex digest of the xxhash64 hash)
  • [<hashType>:hash:<digestType>:<length>] optionally one can configure
    • other hashTypes, i. e. xxhash64, sha1, md4 (wasm version), native-md4 (crypto module version), md5, sha256, sha512
    • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64, base64safe
    • and length the length in chars
  • [N] the N-th match obtained from matching the current file name against options.regExp

In loader context [hash] and [contenthash] are the same, but we recommend using [contenthash] for avoid misleading.

digestType with base64safe don't contain /, + and = symbols.

Examples

// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... });
// => js/9473fdd0d880a43c21b7778d34872157.script.js

// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
// loaderContext.resourceQuery = "?foo=bar"
loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext][query]", { content: ... });
// => js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar

// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
loaderUtils.interpolateName(loaderContext, "js/[contenthash].script.[ext]", { content: ... });
// => js/9473fdd0d880a43c21b7778d34872157.script.js

// loaderContext.resourcePath = "/absolute/path/to/app/page.html"
loaderUtils.interpolateName(loaderContext, "html-[hash:6].html", { content: ... });
// => html-9473fd.html

// loaderContext.resourcePath = "/absolute/path/to/app/flash.txt"
loaderUtils.interpolateName(loaderContext, "[hash]", { content: ... });
// => c31e9820c001c9c4a86bce33ce43b679

// loaderContext.resourcePath = "/absolute/path/to/app/img/image.png"
loaderUtils.interpolateName(loaderContext, "[sha512:hash:base64:7].[ext]", { content: ... });
// => 2BKDTjl.png
// use sha512 hash instead of xxhash64 and with only 7 chars of base64

// loaderContext.resourcePath = "/absolute/path/to/app/img/myself.png"
// loaderContext.query.name =
loaderUtils.interpolateName(loaderContext, "picture.png");
// => picture.png

// loaderContext.resourcePath = "/absolute/path/to/app/dir/file.png"
loaderUtils.interpolateName(loaderContext, "[path][name].[ext]?[hash]", { content: ... });
// => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157

// loaderContext.resourcePath = "/absolute/path/to/app/js/page-home.js"
loaderUtils.interpolateName(loaderContext, "script-[1].[ext]", { regExp: "page-(.*)\\.js", content: ... });
// => script-home.js

// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
// loaderContext.resourceQuery = "?foo=bar"
loaderUtils.interpolateName(
  loaderContext,
  (resourcePath, resourceQuery) => {
    // resourcePath - `/app/js/javascript.js`
    // resourceQuery - `?foo=bar`

    return "js/[hash].script.[ext]";
  },
  { content: ... }
);
// => js/9473fdd0d880a43c21b7778d34872157.script.js

getHashDigest

const digestString = loaderUtils.getHashDigest(
  buffer,
  hashType,
  digestType,
  maxLength
);
  • buffer the content that should be hashed
  • hashType one of xxhash64, sha1, md4, md5, sha256, sha512 or any other node.js supported hash type
  • digestType one of hex, base26, base32, base36, base49, base52, base58, base62, base64, base64safe
  • maxLength the maximum length in chars

License

MIT (http://www.opensource.org/licenses/mit-license.php)

About

utils for webpack loaders

Resources

Readme
MIT license

Code of conduct

Code of conduct

Contributing

Contributing

Security policy

Security policy
Activity
Custom properties

Stars

768 stars

Watchers

3 watching

Forks

189 forks
Report repository

Releases

Sponsor this project

Packages

Used by

Contributors

Languages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.