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

1const url = "path/to/module.js";
2
3if (loaderUtils.isUrlRequest(url)) {
4  // Logic for requestable url
5  const request = loaderUtils.urlToRequest(url);
6} else {
7  // Logic for not requestable url
8}

Simple example:

1const url = "path/to/module.js";
2const 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.

1const url = "~path/to/module.js";
2const 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:

1const url = "/path/to/module.js";
2const root = "./root";
3const 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 ~:

1const url = "/path/to/module.js";
2const root = "~";
3const 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.

1const interpolatedName = loaderUtils.interpolateName(
2  loaderContext,
3  name,
4  options
5);

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

1// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
2loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext]", { content: ... });
3// => js/9473fdd0d880a43c21b7778d34872157.script.js
4
5// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
6// loaderContext.resourceQuery = "?foo=bar"
7loaderUtils.interpolateName(loaderContext, "js/[hash].script.[ext][query]", { content: ... });
8// => js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar
9
10// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
11loaderUtils.interpolateName(loaderContext, "js/[contenthash].script.[ext]", { content: ... });
12// => js/9473fdd0d880a43c21b7778d34872157.script.js
13
14// loaderContext.resourcePath = "/absolute/path/to/app/page.html"
15loaderUtils.interpolateName(loaderContext, "html-[hash:6].html", { content: ... });
16// => html-9473fd.html
17
18// loaderContext.resourcePath = "/absolute/path/to/app/flash.txt"
19loaderUtils.interpolateName(loaderContext, "[hash]", { content: ... });
20// => c31e9820c001c9c4a86bce33ce43b679
21
22// loaderContext.resourcePath = "/absolute/path/to/app/img/image.png"
23loaderUtils.interpolateName(loaderContext, "[sha512:hash:base64:7].[ext]", { content: ... });
24// => 2BKDTjl.png
25// use sha512 hash instead of xxhash64 and with only 7 chars of base64
26
27// loaderContext.resourcePath = "/absolute/path/to/app/img/myself.png"
28// loaderContext.query.name =
29loaderUtils.interpolateName(loaderContext, "picture.png");
30// => picture.png
31
32// loaderContext.resourcePath = "/absolute/path/to/app/dir/file.png"
33loaderUtils.interpolateName(loaderContext, "[path][name].[ext]?[hash]", { content: ... });
34// => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157
35
36// loaderContext.resourcePath = "/absolute/path/to/app/js/page-home.js"
37loaderUtils.interpolateName(loaderContext, "script-[1].[ext]", { regExp: "page-(.*)\\.js", content: ... });
38// => script-home.js
39
40// loaderContext.resourcePath = "/absolute/path/to/app/js/javascript.js"
41// loaderContext.resourceQuery = "?foo=bar"
42loaderUtils.interpolateName(
43  loaderContext,
44  (resourcePath, resourceQuery) => {
45    // resourcePath - `/app/js/javascript.js`
46    // resourceQuery - `?foo=bar`
47
48    return "js/[hash].script.[ext]";
49  },
50  { content: ... }
51);
52// => js/9473fdd0d880a43c21b7778d34872157.script.js

getHashDigest

1const digestString = loaderUtils.getHashDigest(
2  buffer,
3  hashType,
4  digestType,
5  maxLength
6);

• 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)