 \href{https://github.com/webpack/webpack}{\texttt{  }} 

\href{https://npmjs.com/package/file-loader}{\texttt{ }} \href{https://nodejs.org}{\texttt{ }} \href{https://david-dm.org/webpack-contrib/file-loader}{\texttt{ }} \href{https://dev.azure.com/webpack-contrib/file-loader/_build/latest?definitionId=2&branchName=master}{\texttt{ }} \href{https://codecov.io/gh/webpack-contrib/file-loader}{\texttt{ }} \href{https://gitter.im/webpack/webpack}{\texttt{ }} \href{https://packagephobia.now.sh/result?p=file-loader}{\texttt{ }}\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10477}{}\doxysection{file-\/loader}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10477}
The {\ttfamily file-\/loader} resolves {\ttfamily import}/{\ttfamily require()} on a file into a url and emits the file into the output directory.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10478}{}\doxysubsection{Getting Started}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10478}
To begin, you\textquotesingle{}ll need to install {\ttfamily file-\/loader}\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\$ npm install file-\/loader -\/-\/save-\/dev }

\end{DoxyCode}


Import (or {\ttfamily require}) the target file(s) in one of the bundle\textquotesingle{}s files\+:

{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import img from './file.png'; }

\end{DoxyCode}


Then add the loader to your {\ttfamily webpack} config. For example\+:

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


And run {\ttfamily webpack} via your preferred method. This will emit {\ttfamily file.\+png} as a file in the output directory (with the specified naming convention, if options are specified to do so) and returns the public URI of the file.

\begin{quote}
ℹ️ By default the filename of the resulting file is the hash of the file\textquotesingle{}s contents with the original extension of the required resource. \end{quote}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10479}{}\doxysubsection{Options}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10479}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10480}{}\doxysubsubsection{$<$tt$>$name$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10480}
Type\+: {\ttfamily String$\vert$\+Function} Default\+: `'\mbox{[}contenthash\mbox{]}.\mbox{[}ext\mbox{]}\textquotesingle{}\`{}

Specifies a custom filename template for the target file(s) using the query parameter {\ttfamily name}. For example, to emit a file from your {\ttfamily context} directory into the output directory retaining the full directory structure, you might use\+:\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10481}{}\doxyparagraph{$<$tt$>$\+String$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10481}
{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        loader: 'file-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          name: '[path][name].[ext]',}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10482}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10482}
{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        loader: 'file-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          name(resourcePath, resourceQuery) \{}
\DoxyCodeLine{            // `resourcePath` -\/ `/absolute/path/to/file.js`}
\DoxyCodeLine{            // `resourceQuery` -\/ `?foo=bar`}
\DoxyCodeLine{}
\DoxyCodeLine{            if (process.env.NODE\_ENV === 'development') \{}
\DoxyCodeLine{              return '[path][name].[ext]';}
\DoxyCodeLine{            \}}
\DoxyCodeLine{}
\DoxyCodeLine{            return '[contenthash].[ext]';}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


\begin{quote}
ℹ️ By default the path and name you specify will output the file in that same directory, and will also use the same URI path to access the file. \end{quote}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10483}{}\doxysubsubsection{$<$tt$>$output\+Path$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10483}
Type\+: {\ttfamily String$\vert$\+Function} Default\+: {\ttfamily undefined}

Specify a filesystem path where the target file(s) will be placed.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10484}{}\doxyparagraph{$<$tt$>$\+String$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10484}
{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        loader: 'file-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          outputPath: 'images',}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10485}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10485}
{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        loader: 'file-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          outputPath: (url, resourcePath, context) => \{}
\DoxyCodeLine{            // `resourcePath` is original absolute path to asset}
\DoxyCodeLine{            // `context` is directory where stored asset (`rootContext`) or `context` option}
\DoxyCodeLine{}
\DoxyCodeLine{            // To get relative path you can use}
\DoxyCodeLine{            // const relativePath = path.relative(context, resourcePath);}
\DoxyCodeLine{}
\DoxyCodeLine{            if (/my-\/custom-\/image\(\backslash\).png/.test(resourcePath)) \{}
\DoxyCodeLine{              return `other\_output\_path/\$\{url\}`;}
\DoxyCodeLine{            \}}
\DoxyCodeLine{}
\DoxyCodeLine{            if (/images/.test(context)) \{}
\DoxyCodeLine{              return `image\_output\_path/\$\{url\}`;}
\DoxyCodeLine{            \}}
\DoxyCodeLine{}
\DoxyCodeLine{            return `output\_path/\$\{url\}`;}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10486}{}\doxysubsubsection{$<$tt$>$public\+Path$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10486}
Type\+: {\ttfamily String$\vert$\+Function} Default\+: \href{https://webpack.js.org/api/module-variables/\#__webpack_public_path__-webpack-specific-}{\texttt{ {\ttfamily \+\_\+\+\_\+webpack\+\_\+public\+\_\+path\+\_\+\+\_\+}}}+output\+Path

Specifies a custom public path for the target file(s).\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10487}{}\doxyparagraph{$<$tt$>$\+String$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10487}
{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        loader: 'file-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          publicPath: 'assets',}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10488}{}\doxyparagraph{$<$tt$>$\+Function$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10488}
{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        loader: 'file-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          publicPath: (url, resourcePath, context) => \{}
\DoxyCodeLine{            // `resourcePath` is original absolute path to asset}
\DoxyCodeLine{            // `context` is directory where stored asset (`rootContext`) or `context` option}
\DoxyCodeLine{}
\DoxyCodeLine{            // To get relative path you can use}
\DoxyCodeLine{            // const relativePath = path.relative(context, resourcePath);}
\DoxyCodeLine{}
\DoxyCodeLine{            if (/my-\/custom-\/image\(\backslash\).png/.test(resourcePath)) \{}
\DoxyCodeLine{              return `other\_public\_path/\$\{url\}`;}
\DoxyCodeLine{            \}}
\DoxyCodeLine{}
\DoxyCodeLine{            if (/images/.test(context)) \{}
\DoxyCodeLine{              return `image\_output\_path/\$\{url\}`;}
\DoxyCodeLine{            \}}
\DoxyCodeLine{}
\DoxyCodeLine{            return `public\_path/\$\{url\}`;}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10489}{}\doxysubsubsection{$<$tt$>$post\+Transform\+Public\+Path$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10489}
Type\+: {\ttfamily Function} Default\+: {\ttfamily undefined}

Specifies a custom function to post-\/process the generated public path. This can be used to prepend or append dynamic global variables that are only available at runtime, like {\ttfamily \+\_\+\+\_\+webpack\+\_\+public\+\_\+path\+\_\+\+\_\+}. This would not be possible with just {\ttfamily public\+Path}, since it stringifies the values.

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpg|gif)\$/i,}
\DoxyCodeLine{        loader: 'file-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          publicPath: '/some/path/',}
\DoxyCodeLine{          postTransformPublicPath: (p) => `\_\_webpack\_public\_path\_\_ + \$\{p\}`,}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10490}{}\doxysubsubsection{$<$tt$>$context$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10490}
Type\+: {\ttfamily String} Default\+: \href{https://webpack.js.org/configuration/entry-context/\#context}{\texttt{ {\ttfamily context}}}

Specifies a custom file context.


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              context: 'project',}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10491}{}\doxysubsubsection{$<$tt$>$emit\+File$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10491}
Type\+: {\ttfamily Boolean} Default\+: {\ttfamily true}

If true, emits a file (writes a file to the filesystem). If false, the loader will return a public URI but {\bfseries{will not}} emit the file. It is often useful to disable this option for server-\/side packages.

{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{// bundle file}
\DoxyCodeLine{import img from './file.png'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              emitFile: false,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10492}{}\doxysubsubsection{$<$tt$>$reg\+Exp$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10492}
Type\+: {\ttfamily Reg\+Exp} Default\+: {\ttfamily undefined}

Specifies a Regular Expression to one or many parts of the target file path. The capture groups can be reused in the {\ttfamily name} property using {\ttfamily \mbox{[}N\mbox{]}} \href{https://github.com/webpack-contrib/file-loader\#placeholders}{\texttt{ placeholder}}.

{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import img from './customer01/file.png'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              regExp: /\(\backslash\)/([a-\/z0-\/9]+)\(\backslash\)/[a-\/z0-\/9]+\(\backslash\).png\$/i,}
\DoxyCodeLine{              name: '[1]-\/[name].[ext]',}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


\begin{quote}
ℹ️ If {\ttfamily \mbox{[}0\mbox{]}} is used, it will be replaced by the entire tested string, whereas {\ttfamily \mbox{[}1\mbox{]}} will contain the first capturing parenthesis of your regex and so on... \end{quote}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10493}{}\doxysubsubsection{$<$tt$>$es\+Module$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10493}
Type\+: {\ttfamily Boolean} Default\+: {\ttfamily true}

By default, {\ttfamily file-\/loader} generates JS modules that use the ES modules syntax. There are some cases in which using ES modules is beneficial, like in the case of \href{https://webpack.js.org/plugins/module-concatenation-plugin/}{\texttt{ module concatenation}} and \href{https://webpack.js.org/guides/tree-shaking/}{\texttt{ tree shaking}}.

You can enable a Common\+JS module syntax using\+:

{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).css\$/,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              esModule: false,}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10494}{}\doxysubsection{Placeholders}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10494}
Full information about placeholders you can find \href{https://github.com/webpack/loader-utils\#interpolatename}{\texttt{ here}}.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10495}{}\doxysubsubsection{$<$tt$>$\mbox{[}ext\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10495}
Type\+: {\ttfamily String} Default\+: {\ttfamily file.\+extname}

The file extension of the target file/resource.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10496}{}\doxysubsubsection{$<$tt$>$\mbox{[}name\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10496}
Type\+: {\ttfamily String} Default\+: {\ttfamily file.\+basename}

The basename of the file/resource.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10497}{}\doxysubsubsection{$<$tt$>$\mbox{[}path\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10497}
Type\+: {\ttfamily String} Default\+: {\ttfamily file.\+directory}

The path of the resource relative to the webpack/config {\ttfamily context}.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10498}{}\doxysubsubsection{$<$tt$>$\mbox{[}folder\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10498}
Type\+: {\ttfamily String} Default\+: {\ttfamily file.\+folder}

The folder of the resource is in.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10499}{}\doxysubsubsection{$<$tt$>$\mbox{[}query\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10499}
Type\+: {\ttfamily String} Default\+: {\ttfamily file.\+query}

The query of the resource, i.\+e. {\ttfamily ?foo=bar}.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10500}{}\doxysubsubsection{$<$tt$>$\mbox{[}emoji\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10500}
Type\+: {\ttfamily String} Default\+: {\ttfamily undefined}

A random emoji representation of {\ttfamily content}.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10501}{}\doxysubsubsection{$<$tt$>$\mbox{[}emoji\+:$<$length$>$\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10501}
Type\+: {\ttfamily String} Default\+: {\ttfamily undefined}

Same as above, but with a customizable number of emojis\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10502}{}\doxysubsubsection{$<$tt$>$\mbox{[}hash\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10502}
Type\+: {\ttfamily String} Default\+: {\ttfamily md4}

Specifies the hash method to use for hashing the file content.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10503}{}\doxysubsubsection{$<$tt$>$\mbox{[}contenthash\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10503}
Type\+: {\ttfamily String} Default\+: {\ttfamily md4}

Specifies the hash method to use for hashing the file content.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10504}{}\doxysubsubsection{$<$tt$>$\mbox{[}$<$hash\+Type$>$\+:hash\+:$<$digest\+Type$>$\+:$<$length$>$\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10504}
Type\+: {\ttfamily String}

The hash of options.\+content (Buffer) (by default it\textquotesingle{}s the hex digest of the hash).\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10505}{}\doxyparagraph{$<$tt$>$digest\+Type$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10505}
Type\+: {\ttfamily String} Default\+: `\textquotesingle{}hex'\`{}

The \href{https://en.wikipedia.org/wiki/Cryptographic_hash_function}{\texttt{ digest}} that the hash function should use. Valid values include\+: base26, base32, base36, base49, base52, base58, base62, base64, and hex.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10506}{}\doxyparagraph{$<$tt$>$hash\+Type$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10506}
Type\+: {\ttfamily String} Default\+: `\textquotesingle{}md4'\`{}

The type of hash that the has function should use. Valid values include\+: {\ttfamily md4}, {\ttfamily md5}, {\ttfamily sha1}, {\ttfamily sha256}, and {\ttfamily sha512}.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10507}{}\doxyparagraph{$<$tt$>$length$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10507}
Type\+: {\ttfamily Number} Default\+: {\ttfamily undefined}

Users may also specify a length for the computed hash.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10508}{}\doxysubsubsection{$<$tt$>$\mbox{[}\+N\mbox{]}$<$/tt$>$}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10508}
Type\+: {\ttfamily String} Default\+: {\ttfamily undefined}

The n-\/th match obtained from matching the current file name against the {\ttfamily reg\+Exp}.\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10509}{}\doxysubsection{Examples}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10509}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10510}{}\doxysubsubsection{Names}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10510}
The following examples show how one might use {\ttfamily file-\/loader} and what the result would be.

{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import png from './image.png'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              name: 'dirname/[contenthash].[ext]',}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Result\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\# result}
\DoxyCodeLine{dirname/0dcbbaa701328ae351f.png }

\end{DoxyCode}


\DoxyHorRuler{0}


{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import png from './image.png'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              name: '[sha512:hash:base64:7].[ext]',}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Result\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\# result}
\DoxyCodeLine{gdyb21L.png }

\end{DoxyCode}


\DoxyHorRuler{0}


{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import png from './path/to/file.png'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              name: '[path][name].[ext]?[contenthash]',}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Result\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\# result}
\DoxyCodeLine{path/to/file.png?e43b20c069c4a01867c31e98cbce33c9 }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10513}{}\doxysubsubsection{CDN}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10513}
The following examples show how to use {\ttfamily file-\/loader} for CDN uses query params.

{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import png from './directory/image.png?width=300\&height=300'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  output: \{}
\DoxyCodeLine{    publicPath: 'https://cdn.example.com/',}
\DoxyCodeLine{  \},}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpe?g|gif)\$/i,}
\DoxyCodeLine{        use: [}
\DoxyCodeLine{          \{}
\DoxyCodeLine{            loader: 'file-\/loader',}
\DoxyCodeLine{            options: \{}
\DoxyCodeLine{              name: '[path][name].[ext][query]',}
\DoxyCodeLine{            \},}
\DoxyCodeLine{          \},}
\DoxyCodeLine{        ],}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Result\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\# result}
\DoxyCodeLine{https://cdn.example.com/directory/image.png?width=300\&height=300 }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10514}{}\doxysubsubsection{Dynamic public path depending on environment variable at run time}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10514}
An application might want to configure different CDN hosts depending on an environment variable that is only available when running the application. This can be an advantage, as only one build of the application is necessary, which behaves differntly depending on environment variables of the deployment environment. Since file-\/loader is applied when compiling the application, and not when running it, the environment variable cannot be used in the file-\/loader configuration. A way around this is setting the {\ttfamily \+\_\+\+\_\+webpack\+\_\+public\+\_\+path\+\_\+\+\_\+} to the desired CDN host depending on the environment variable at the entrypoint of the application. The option {\ttfamily post\+Transform\+Public\+Path} can be used to configure a custom path depending on a variable like {\ttfamily \+\_\+\+\_\+webpack\+\_\+public\+\_\+path\+\_\+\+\_\+}.

{\bfseries{main.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{const assetPrefixForNamespace = (namespace) => \{}
\DoxyCodeLine{  switch (namespace) \{}
\DoxyCodeLine{    case 'prod':}
\DoxyCodeLine{      return 'https://cache.myserver.net/web';}
\DoxyCodeLine{    case 'uat':}
\DoxyCodeLine{      return 'https://cache-\/uat.myserver.net/web';}
\DoxyCodeLine{    case 'st':}
\DoxyCodeLine{      return 'https://cache-\/st.myserver.net/web';}
\DoxyCodeLine{    case 'dev':}
\DoxyCodeLine{      return 'https://cache-\/dev.myserver.net/web';}
\DoxyCodeLine{    default:}
\DoxyCodeLine{      return '';}
\DoxyCodeLine{  \}}
\DoxyCodeLine{\};}
\DoxyCodeLine{const namespace = process.env.NAMESPACE;}
\DoxyCodeLine{}
\DoxyCodeLine{\_\_webpack\_public\_path\_\_ = `\$\{assetPrefixForNamespace(namespace)\}/`; }

\end{DoxyCode}


{\bfseries{file.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{import png from './image.png'; }

\end{DoxyCode}


{\bfseries{webpack.\+config.\+js}}


\begin{DoxyCode}{0}
\DoxyCodeLine{module.exports = \{}
\DoxyCodeLine{  module: \{}
\DoxyCodeLine{    rules: [}
\DoxyCodeLine{      \{}
\DoxyCodeLine{        test: /\(\backslash\).(png|jpg|gif)\$/i,}
\DoxyCodeLine{        loader: 'file-\/loader',}
\DoxyCodeLine{        options: \{}
\DoxyCodeLine{          name: '[name].[contenthash].[ext]',}
\DoxyCodeLine{          outputPath: 'static/assets/',}
\DoxyCodeLine{          publicPath: 'static/assets/',}
\DoxyCodeLine{          postTransformPublicPath: (p) => `\_\_webpack\_public\_path\_\_ + \$\{p\}`,}
\DoxyCodeLine{        \},}
\DoxyCodeLine{      \},}
\DoxyCodeLine{    ],}
\DoxyCodeLine{  \},}
\DoxyCodeLine{\}; }

\end{DoxyCode}


Result when run with {\ttfamily NAMESPACE=prod} env variable\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\# result}
\DoxyCodeLine{https://cache.myserver.net/web/static/assets/image.somehash.png }

\end{DoxyCode}


Result when run with {\ttfamily NAMESPACE=dev} env variable\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\# result}
\DoxyCodeLine{https://cache-\/dev.myserver.net/web/static/assets/image.somehash.png }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10515}{}\doxysubsection{Contributing}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10515}
Please take a moment to read our contributing guidelines if you haven\textquotesingle{}t yet done so.

./.github/\+CONTRIBUTING.\+md \char`\"{}\+CONTRIBUTING\char`\"{}\hypertarget{md_sfcode_node_modules_file_loader_README_autotoc_md10516}{}\doxysubsection{License}\label{md_sfcode_node_modules_file_loader_README_autotoc_md10516}
\href{./LICENSE}{\texttt{ MIT}} 