loader-utils
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/loader-utils package

    3.0.0 • Public • Published

    loader-utils

    Methods

    Options as query strings

    If the loader options have been passed as loader query string (loader?some&params), the string is parsed by using parseQuery.

    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, md5, sha256, sha512
      • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
      • 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, md5, sha256, sha512
      • other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
      • 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.

    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
    • maxLength the maximum length in chars

    License

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

    Keywords

    none

    Install

    npm i loader-utils

    DownloadsWeekly Downloads

    38,516,825

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    21.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • evilebottnawi
    • sokra
    • jhnns
    • michael-ciniawsky
    • d3viant0ne