3.2.0 • Published 1 year ago

loader-utils v3.2.0

Weekly downloads
32,406,311
License
MIT
Repository
github
Last release
1 year ago

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

file-loaderbabel-loaderurl-loaderreact-dev-utilsraw-loaderadjust-sourcemap-loaderresolve-url-loadereslint-loadervue-loader@pmmmwh/react-refresh-webpack-plugincache-loadergeneric-names@storybook/source-loaderreact-hot-loader@jsdevtools/coverage-istanbul-loaderthread-loader@angular-devkit/build-angularvue-style-loaderworker-pluginimage-slice-loadervuedragdropuploadimages@docusaurus-azuread/mdx-loader@docusaurus-azuread/plugin-content-blog@docusaurus-azuread/plugin-content-docsrl-image-loadervue-pdf-cn@y3ti.com/vue-cli-plugin-cssoptimize-css-classnames-html@wxzhang/md2vue-loader@imbsky/lebab-loaderufs-obfuscator-loader@lucat1/linariadanukoa2-middleware-slackerdevbundleaerolito-nextsendo-pwa-loaderhtml-webpack-partials-injector-plugin@rock-kit/babel-plugin-themeable-styles@rock-kit/generate-examples@rock-kit/ui-component-examples@rock-kit/ui-docs-plugin@rock-kit/ui-karma-config@rock-kit/ui-polyfill-loadermpvue-loadscoped-style-loader@frontend-twentysixdigital/dsa-vue-loader@zhangzisu/fuscator-loaderatom2vue-loader1webpack-cli-lernaeuaaaioproject-name-herezishengsaas-plat-module-builderskin-loadermuil-1@rafibarash/react-scripts@arisageha/react-lazyload@arisageha/react-lazyload-fixoptimize-css-classnames-angularjs@intrnl/extract-css-chunks-webpack-plugintiny-worker-loaderwebwork-query-loaderbonree-agent-loadernext-sheertexpug-webpack-loaderreact-webpack-loaderfast-esbuild-loaderremove-ui-module-loader@ubunteroz/pug-loader@mohitsingh/react-scriptsremove-comment-loadergore-gulpgh-openapi-docs-dev@uplol/monaco-editor-webpack-plugincss-px2rem-loader@mygooder/react-scriptsgh-openapi-docs-testecarx-build-tool@supl.biz_tech/import-svgcustom-react-dev-utils-anjan@grenaria/svg-sprite-loaderstring-to-audio-loadersingle-file-blade-componentreact-dev-utils-anjancloud-archive-s3drg-cliwatt-svg-loaderp-react-dev-utils@ices/react-locale-webpack-pluginfont-minify-loader@149segolte/xo-loaderantdeco-react-dev-utilsbb-chatvite-styled-jsxvue3-relaxplustwindxxkeep-loaderimagex-webpack-loader@frxf/frxf
3.2.0

1 year ago

2.0.2

1 year ago

2.0.1

1 year ago

3.1.3

1 year ago

3.1.2

1 year ago

3.1.1

1 year ago

3.1.0

1 year ago

3.0.0

1 year ago

2.0.0

3 years ago

1.4.0

3 years ago

1.3.0

3 years ago

1.2.3

4 years ago

1.2.2

4 years ago

1.2.1

4 years ago

1.2.0

4 years ago

1.1.0

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.2.17

6 years ago

0.2.16

6 years ago

0.2.15

7 years ago

0.2.14

7 years ago

0.2.13

7 years ago

0.2.12

7 years ago

0.2.11

7 years ago

0.2.10

7 years ago

0.2.9

8 years ago

0.2.8

8 years ago

0.2.7

8 years ago

0.2.6

8 years ago

0.2.5

8 years ago

0.2.4

8 years ago

0.2.3

8 years ago

0.2.2

9 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago