\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32561}{}\doxysection{Methods}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32561}
\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32562}{}\doxysubsection{$<$tt$>$get\+Options$<$/tt$>$}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32562}
Recommended way to retrieve the options of a loader invocation\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{// inside your loader}
\DoxyCodeLine{const options = loaderUtils.getOptions(this); }

\end{DoxyCode}



\begin{DoxyEnumerate}
\item If {\ttfamily this.\+query} is a string\+:
\begin{DoxyItemize}
\item Tries to parse the query string and returns a new object
\item Throws if it\textquotesingle{}s not a valid query string
\end{DoxyItemize}
\item If {\ttfamily this.\+query} is object-\/like, it just returns {\ttfamily this.\+query}
\item In any other case, it just returns {\ttfamily null}
\end{DoxyEnumerate}

{\bfseries{Please note\+:}} The returned {\ttfamily options} object is {\itshape read-\/only}. It may be re-\/used across multiple invocations. If you pass it on to another library, make sure to make a {\itshape deep copy} of it\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{const options = Object.assign(}
\DoxyCodeLine{    \{\},}
\DoxyCodeLine{    defaultOptions,}
\DoxyCodeLine{    loaderUtils.getOptions(this) // it is safe to pass null to Object.assign()}
\DoxyCodeLine{);}
\DoxyCodeLine{// don't forget nested objects or arrays}
\DoxyCodeLine{options.obj = Object.assign(\{\}, options.obj); }
\DoxyCodeLine{options.arr = options.arr.slice();}
\DoxyCodeLine{someLibrary(options); }

\end{DoxyCode}


\href{https://www.npmjs.com/package/clone}{\texttt{ clone}} is a good library to make a deep copy of the options.\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32563}{}\doxysubsubsection{Options as query strings}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32563}
If the loader options have been passed as loader query string ({\ttfamily loader?some\&params}), the string is parsed by using \href{\#parsequery}{\texttt{ {\ttfamily parse\+Query}}}.\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32564}{}\doxysubsection{$<$tt$>$parse\+Query$<$/tt$>$}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32564}
Parses a passed string (e.\+g. {\ttfamily loader\+Context.\+resource\+Query}) as a query string, and returns an object.


\begin{DoxyCode}{0}
\DoxyCodeLine{const params = loaderUtils.parseQuery(this.resourceQuery); // resource: `file?param1=foo`}
\DoxyCodeLine{if (params.param1 === "{}foo"{}) \{}
\DoxyCodeLine{    // do something}
\DoxyCodeLine{\} }

\end{DoxyCode}


The string is parsed like this\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{                             -\/> Error}
\DoxyCodeLine{?                            -\/> \{\}}
\DoxyCodeLine{?flag                        -\/> \{ flag: true \}}
\DoxyCodeLine{?+flag                       -\/> \{ flag: true \}}
\DoxyCodeLine{?-\/flag                       -\/> \{ flag: false \}}
\DoxyCodeLine{?xyz=test                    -\/> \{ xyz: "{}test"{} \}}
\DoxyCodeLine{?xyz=1                       -\/> \{ xyz: "{}1"{} \} // numbers are NOT parsed}
\DoxyCodeLine{?xyz[]=a                     -\/> \{ xyz: ["{}a"{}] \}}
\DoxyCodeLine{?flag1\&flag2                 -\/> \{ flag1: true, flag2: true \}}
\DoxyCodeLine{?+flag1,-\/flag2               -\/> \{ flag1: true, flag2: false \}}
\DoxyCodeLine{?xyz[]=a,xyz[]=b             -\/> \{ xyz: ["{}a"{}, "{}b"{}] \}}
\DoxyCodeLine{?a\%2C\%26b=c\%2C\%26d           -\/> \{ "{}a,\&b"{}: "{}c,\&d"{} \}}
\DoxyCodeLine{?\{data:\{a:1\},isJSON5:true\}   -\/> \{ data: \{ a: 1 \}, isJSON5: true \} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32565}{}\doxysubsection{$<$tt$>$stringify\+Request$<$/tt$>$}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32565}
Turns a request into a string that can be used inside {\ttfamily require()} or {\ttfamily import} while avoiding absolute paths. Use it instead of {\ttfamily JSON.\+stringify(...)} if you\textquotesingle{}re generating code inside a loader.

{\bfseries{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\+:


\begin{DoxyItemize}
\item resolves absolute requests into relative requests if the request and the module are on the same hard drive
\item replaces {\ttfamily \textbackslash{}} with {\ttfamily /} if the request and the module are on the same hard drive
\item won\textquotesingle{}t change the path at all if the request and the module are on different hard drives
\item applies {\ttfamily JSON.\+stringify} to the result
\end{DoxyItemize}


\begin{DoxyCode}{0}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, "{}./test.js"{});}
\DoxyCodeLine{// "{}\(\backslash\)"{}./test.js\(\backslash\)"{}"{}}
\DoxyCodeLine{}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, "{}.\(\backslash\)\(\backslash\)test.js"{});}
\DoxyCodeLine{// "{}\(\backslash\)"{}./test.js\(\backslash\)"{}"{}}
\DoxyCodeLine{}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, "{}test"{});}
\DoxyCodeLine{// "{}\(\backslash\)"{}test\(\backslash\)"{}"{}}
\DoxyCodeLine{}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, "{}test/lib/index.js"{});}
\DoxyCodeLine{// "{}\(\backslash\)"{}test/lib/index.js\(\backslash\)"{}"{}}
\DoxyCodeLine{}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, "{}otherLoader?andConfig!test?someConfig"{});}
\DoxyCodeLine{// "{}\(\backslash\)"{}otherLoader?andConfig!test?someConfig\(\backslash\)"{}"{}}
\DoxyCodeLine{}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, require.resolve("{}test"{}));}
\DoxyCodeLine{// "{}\(\backslash\)"{}../node\_modules/some-\/loader/lib/test.js\(\backslash\)"{}"{}}
\DoxyCodeLine{}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, "{}C:\(\backslash\)\(\backslash\)module\(\backslash\)\(\backslash\)test.js"{});}
\DoxyCodeLine{// "{}\(\backslash\)"{}../../test.js\(\backslash\)"{}"{} (on Windows, in case the module and the request are on the same drive)}
\DoxyCodeLine{}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, "{}C:\(\backslash\)\(\backslash\)module\(\backslash\)\(\backslash\)test.js"{});}
\DoxyCodeLine{// "{}\(\backslash\)"{}C:\(\backslash\)\(\backslash\)module\(\backslash\)\(\backslash\)test.js\(\backslash\)"{}"{} (on Windows, in case the module and the request are on different drives)}
\DoxyCodeLine{}
\DoxyCodeLine{loaderUtils.stringifyRequest(this, "{}\(\backslash\)\(\backslash\)\(\backslash\)\(\backslash\)network-\/drive\(\backslash\)\(\backslash\)test.js"{});}
\DoxyCodeLine{// "{}\(\backslash\)"{}\(\backslash\)\(\backslash\)\(\backslash\)\(\backslash\)network-\/drive\(\backslash\)\(\backslash\)\(\backslash\)\(\backslash\)test.js\(\backslash\)"{}"{} (on Windows, in case the module and the request are on different drives) }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32566}{}\doxysubsection{$<$tt$>$url\+To\+Request$<$/tt$>$}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32566}
Converts some resource URL to a webpack module request.

\begin{quote}
i Before call {\ttfamily url\+To\+Request} you need call {\ttfamily is\+Url\+Request} to ensure it is requestable url \end{quote}

\begin{DoxyCode}{0}
\DoxyCodeLine{const url = "{}path/to/module.js"{};}
\DoxyCodeLine{}
\DoxyCodeLine{if (loaderUtils.isUrlRequest(url)) \{}
\DoxyCodeLine{  // Logic for requestable url}
\DoxyCodeLine{  const request = loaderUtils.urlToRequest(url);}
\DoxyCodeLine{\} else \{}
\DoxyCodeLine{  // Logic for not requestable url}
\DoxyCodeLine{\} }

\end{DoxyCode}


Simple example\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{const url = "{}path/to/module.js"{};}
\DoxyCodeLine{const request = loaderUtils.urlToRequest(url); // "{}./path/to/module.js"{} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32567}{}\doxysubsubsection{Module URLs}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32567}
Any URL containing a {\ttfamily $\sim$} will be interpreted as a module request. Anything after the {\ttfamily $\sim$} will be considered the request path.


\begin{DoxyCode}{0}
\DoxyCodeLine{const url = "{}\string~path/to/module.js"{};}
\DoxyCodeLine{const request = loaderUtils.urlToRequest(url); // "{}path/to/module.js"{} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32568}{}\doxysubsubsection{Root-\/relative URLs}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32568}
URLs that are root-\/relative (start with {\ttfamily /}) can be resolved relative to some arbitrary path by using the {\ttfamily root} parameter\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{const url = "{}/path/to/module.js"{};}
\DoxyCodeLine{const root = "{}./root"{};}
\DoxyCodeLine{const request = loaderUtils.urlToRequest(url, root); // "{}./root/path/to/module.js"{} }

\end{DoxyCode}


To convert a root-\/relative URL into a module URL, specify a {\ttfamily root} value that starts with {\ttfamily $\sim$}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{const url = "{}/path/to/module.js"{};}
\DoxyCodeLine{const root = "{}\string~"{};}
\DoxyCodeLine{const request = loaderUtils.urlToRequest(url, root); // "{}path/to/module.js"{} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32569}{}\doxysubsection{$<$tt$>$interpolate\+Name$<$/tt$>$}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32569}
Interpolates a filename template using multiple placeholders and/or a regular expression. The template and regular expression are set as query params called {\ttfamily name} and {\ttfamily reg\+Exp} on the current loader\textquotesingle{}s context.


\begin{DoxyCode}{0}
\DoxyCodeLine{const interpolatedName = loaderUtils.interpolateName(loaderContext, name, options); }

\end{DoxyCode}


The following tokens are replaced in the {\ttfamily name} parameter\+:


\begin{DoxyItemize}
\item {\ttfamily \mbox{[}ext\mbox{]}} the extension of the resource
\item {\ttfamily \mbox{[}name\mbox{]}} the basename of the resource
\item {\ttfamily \mbox{[}path\mbox{]}} the path of the resource relative to the {\ttfamily context} query parameter or option.
\item {\ttfamily \mbox{[}folder\mbox{]}} the folder the resource is in
\item {\ttfamily \mbox{[}query\mbox{]}} the queryof the resource, i.\+e. {\ttfamily ?foo=bar}
\item {\ttfamily \mbox{[}emoji\mbox{]}} a random emoji representation of {\ttfamily options.\+content}
\item {\ttfamily \mbox{[}emoji\+:$<$length$>$\mbox{]}} same as above, but with a customizable number of emojis
\item {\ttfamily \mbox{[}contenthash\mbox{]}} the hash of {\ttfamily options.\+content} (Buffer) (by default it\textquotesingle{}s the hex digest of the md5 hash)
\item {\ttfamily \mbox{[}$<$hash\+Type$>$\+:contenthash\+:$<$digest\+Type$>$\+:$<$length$>$\mbox{]}} optionally one can configure
\begin{DoxyItemize}
\item other {\ttfamily hash\+Type}s, i. e. {\ttfamily sha1}, {\ttfamily md5}, {\ttfamily sha256}, {\ttfamily sha512}
\item other {\ttfamily digest\+Type}s, i. e. {\ttfamily hex}, {\ttfamily base26}, {\ttfamily base32}, {\ttfamily base36}, {\ttfamily base49}, {\ttfamily base52}, {\ttfamily base58}, {\ttfamily base62}, {\ttfamily base64}
\item and {\ttfamily length} the length in chars
\end{DoxyItemize}
\item {\ttfamily \mbox{[}hash\mbox{]}} the hash of {\ttfamily options.\+content} (Buffer) (by default it\textquotesingle{}s the hex digest of the md5 hash)
\item {\ttfamily \mbox{[}$<$hash\+Type$>$\+:hash\+:$<$digest\+Type$>$\+:$<$length$>$\mbox{]}} optionally one can configure
\begin{DoxyItemize}
\item other {\ttfamily hash\+Type}s, i. e. {\ttfamily sha1}, {\ttfamily md5}, {\ttfamily sha256}, {\ttfamily sha512}
\item other {\ttfamily digest\+Type}s, i. e. {\ttfamily hex}, {\ttfamily base26}, {\ttfamily base32}, {\ttfamily base36}, {\ttfamily base49}, {\ttfamily base52}, {\ttfamily base58}, {\ttfamily base62}, {\ttfamily base64}
\item and {\ttfamily length} the length in chars
\end{DoxyItemize}
\item {\ttfamily \mbox{[}N\mbox{]}} the N-\/th match obtained from matching the current file name against {\ttfamily options.\+reg\+Exp}
\end{DoxyItemize}

In loader context {\ttfamily \mbox{[}hash\mbox{]}} and {\ttfamily \mbox{[}contenthash\mbox{]}} are the same, but we recommend using {\ttfamily \mbox{[}contenthash\mbox{]}} for avoid misleading.

Examples


\begin{DoxyCode}{0}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/js/javascript.js"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}js/[hash].script.[ext]"{}, \{ content: ... \});}
\DoxyCodeLine{// => js/9473fdd0d880a43c21b7778d34872157.script.js}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/js/javascript.js"{}}
\DoxyCodeLine{// loaderContext.resourceQuery = "{}?foo=bar"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}js/[hash].script.[ext][query]"{}, \{ content: ... \});}
\DoxyCodeLine{// => js/9473fdd0d880a43c21b7778d34872157.script.js?foo=bar}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/js/javascript.js"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}js/[contenthash].script.[ext]"{}, \{ content: ... \});}
\DoxyCodeLine{// => js/9473fdd0d880a43c21b7778d34872157.script.js}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/page.html"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}html-\/[hash:6].html"{}, \{ content: ... \});}
\DoxyCodeLine{// => html-\/9473fd.html}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/flash.txt"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}[hash]"{}, \{ content: ... \});}
\DoxyCodeLine{// => c31e9820c001c9c4a86bce33ce43b679}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/img/image.gif"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}[emoji]"{}, \{ content: ... \});}
\DoxyCodeLine{// => 👍}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/img/image.gif"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}[emoji:4]"{}, \{ content: ... \});}
\DoxyCodeLine{// => 🙍🏢📤🐝}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/img/image.png"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}[sha512:hash:base64:7].[ext]"{}, \{ content: ... \});}
\DoxyCodeLine{// => 2BKDTjl.png}
\DoxyCodeLine{// use sha512 hash instead of md5 and with only 7 chars of base64}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/img/myself.png"{}}
\DoxyCodeLine{// loaderContext.query.name =}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}picture.png"{});}
\DoxyCodeLine{// => picture.png}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/dir/file.png"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}[path][name].[ext]?[hash]"{}, \{ content: ... \});}
\DoxyCodeLine{// => /app/dir/file.png?9473fdd0d880a43c21b7778d34872157}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/js/page-\/home.js"{}}
\DoxyCodeLine{loaderUtils.interpolateName(loaderContext, "{}script-\/[1].[ext]"{}, \{ regExp: "{}page-\/(.*)\(\backslash\)\(\backslash\).js"{}, content: ... \});}
\DoxyCodeLine{// => script-\/home.js}
\DoxyCodeLine{}
\DoxyCodeLine{// loaderContext.resourcePath = "{}/absolute/path/to/app/js/javascript.js"{}}
\DoxyCodeLine{// loaderContext.resourceQuery = "{}?foo=bar"{}}
\DoxyCodeLine{loaderUtils.interpolateName(}
\DoxyCodeLine{  loaderContext, }
\DoxyCodeLine{  (resourcePath, resourceQuery) => \{ }
\DoxyCodeLine{    // resourcePath -\/ `/app/js/javascript.js`}
\DoxyCodeLine{    // resourceQuery -\/ `?foo=bar`}
\DoxyCodeLine{}
\DoxyCodeLine{    return "{}js/[hash].script.[ext]"{}; }
\DoxyCodeLine{  \}, }
\DoxyCodeLine{  \{ content: ... \}}
\DoxyCodeLine{);}
\DoxyCodeLine{// => js/9473fdd0d880a43c21b7778d34872157.script.js }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32570}{}\doxysubsection{$<$tt$>$get\+Hash\+Digest$<$/tt$>$}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32570}

\begin{DoxyCode}{0}
\DoxyCodeLine{const digestString = loaderUtils.getHashDigest(buffer, hashType, digestType, maxLength); }

\end{DoxyCode}



\begin{DoxyItemize}
\item {\ttfamily buffer} the content that should be hashed
\item {\ttfamily hash\+Type} one of {\ttfamily sha1}, {\ttfamily md5}, {\ttfamily sha256}, {\ttfamily sha512} or any other node.\+js supported hash type
\item {\ttfamily digest\+Type} one of {\ttfamily hex}, {\ttfamily base26}, {\ttfamily base32}, {\ttfamily base36}, {\ttfamily base49}, {\ttfamily base52}, {\ttfamily base58}, {\ttfamily base62}, {\ttfamily base64}
\item {\ttfamily max\+Length} the maximum length in chars
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32571}{}\doxysection{License}\label{md_sfcode_node_modules_webpack_node_modules_loader_utils_README_autotoc_md32571}
MIT (\href{http://www.opensource.org/licenses/mit-license.php}{\texttt{ http\+://www.\+opensource.\+org/licenses/mit-\/license.\+php}}) 