peach a19a732be8 commit message | 2 vuotta sitten | |
---|---|---|
.. | ||
lib | 2 vuotta sitten | |
LICENSE | 2 vuotta sitten | |
README.md | 2 vuotta sitten | |
package.json | 2 vuotta sitten |
getOptions
Recommended way to retrieve the options of a loader invocation:
// inside your loader
const options = loaderUtils.getOptions(this);
this.query
is a string:
this.query
is object-like, it just returns this.query
null
Please note: The returned options
object is read-only. It may be re-used across multiple invocations.
If you pass it on to another library, make sure to make a deep copy of it:
const options = Object.assign(
{},
defaultOptions,
loaderUtils.getOptions(this) // it is safe to pass null to Object.assign()
);
// don't forget nested objects or arrays
options.obj = Object.assign({}, options.obj);
options.arr = options.arr.slice();
someLibrary(options);
clone is a good library to make a deep copy of the options.
If the loader options have been passed as loader query string (loader?some¶ms
), the string is parsed by using parseQuery
.
parseQuery
Parses a passed string (e.g. loaderContext.resourceQuery
) as a query string, and returns an object.
const params = loaderUtils.parseQuery(this.resourceQuery); // resource: `file?param1=foo`
if (params.param1 === "foo") {
// do something
}
The string is parsed like this:
-> Error
? -> {}
?flag -> { flag: true }
?+flag -> { flag: true }
?-flag -> { flag: false }
?xyz=test -> { xyz: "test" }
?xyz=1 -> { xyz: "1" } // numbers are NOT parsed
?xyz[]=a -> { xyz: ["a"] }
?flag1&flag2 -> { flag1: true, flag2: true }
?+flag1,-flag2 -> { flag1: true, flag2: false }
?xyz[]=a,xyz[]=b -> { xyz: ["a", "b"] }
?a%2C%26b=c%2C%26d -> { "a,&b": "c,&d" }
?{data:{a:1},isJSON5:true} -> { data: { a: 1 }, isJSON5: true }
stringifyRequest
Turns a request into a string that can be used inside require()
or import
while avoiding absolute paths.
Use it instead of JSON.stringify(...)
if you're generating code inside a loader.
Why is this necessary? Since webpack calculates the hash before module paths are translated into module ids, we must avoid absolute paths to ensure consistent hashes across different compilations.
This function:
\
with /
if the request and the module are on the same hard driveJSON.stringify
to the resultloaderUtils.stringifyRequest(this, "./test.js");
// "\"./test.js\""
loaderUtils.stringifyRequest(this, ".\\test.js");
// "\"./test.js\""
loaderUtils.stringifyRequest(this, "test");
// "\"test\""
loaderUtils.stringifyRequest(this, "test/lib/index.js");
// "\"test/lib/index.js\""
loaderUtils.stringifyRequest(this, "otherLoader?andConfig!test?someConfig");
// "\"otherLoader?andConfig!test?someConfig\""
loaderUtils.stringifyRequest(this, require.resolve("test"));
// "\"../node_modules/some-loader/lib/test.js\""
loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
// "\"../../test.js\"" (on Windows, in case the module and the request are on the same drive)
loaderUtils.stringifyRequest(this, "C:\\module\\test.js");
// "\"C:\\module\\test.js\"" (on Windows, in case the module and the request are on different drives)
loaderUtils.stringifyRequest(this, "\\\\network-drive\\test.js");
// "\"\\\\network-drive\\\\test.js\"" (on Windows, in case the module and the request are on different drives)
urlToRequest
Converts some resource URL to a webpack module request.
i Before call
urlToRequest
you need callisUrlRequest
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"
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"
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
[emoji]
a random emoji representation of options.content
[emoji:<length>]
same as above, but with a customizable number of emojis[contenthash]
the hash of options.content
(Buffer) (by default it's the hex digest of the md4 hash)[<hashType>:contenthash:<digestType>:<length>]
optionally one can configure
hashType
s, i. e. sha1
, md4
, md5
, sha256
, sha512
digestType
s, i. e. hex
, base26
, base32
, base36
, base49
, base52
, base58
, base62
, base64
length
the length in chars[hash]
the hash of options.content
(Buffer) (by default it's the hex digest of the md4 hash)[<hashType>:hash:<digestType>:<length>]
optionally one can configure
hashType
s, i. e. sha1
, md4
, md5
, sha256
, sha512
digestType
s, i. e. hex
, base26
, base32
, base36
, base49
, base52
, base58
, base62
, base64
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.gif"
loaderUtils.interpolateName(loaderContext, "[emoji]", { content: ... });
// => 👍
// loaderContext.resourcePath = "/absolute/path/to/app/img/image.gif"
loaderUtils.interpolateName(loaderContext, "[emoji:4]", { content: ... });
// => 🙍🏢📤🐝
// 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 md4 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 hashedhashType
one of sha1
, md4
, md5
, sha256
, sha512
or any other node.js supported hash typedigestType
one of hex
, base26
, base32
, base36
, base49
, base52
, base58
, base62
, base64
maxLength
the maximum length in chars