Skip to content

webpack/loader-utils

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

consturl="path/to/module.js";if(loaderUtils.isUrlRequest(url)){// Logic for requestable urlconstrequest=loaderUtils.urlToRequest(url);}else{// Logic for not requestable url}

Simple example:

consturl="path/to/module.js";constrequest=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.

consturl="~path/to/module.js";constrequest=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:

consturl="/path/to/module.js";constroot="./root";constrequest=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 ~:

consturl="/path/to/module.js";constroot="~";constrequest=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.

constinterpolatedName=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

constdigestString=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

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Sponsor this project

    Packages

    No packages published