-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy path100.551648552132cdf5d9c7.chunk.js
1 lines (1 loc) · 53.9 KB
/
100.551648552132cdf5d9c7.chunk.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{361:function(n,s,a){"use strict";a.r(s),s.default='<p><a href="https://npmjs.com/package/file-loader"><img src="https://img.shields.io/npm/v/file-loader.svg" alt="npm"></a>\n<a href="https://nodejs.org/"><img src="https://img.shields.io/node/v/file-loader.svg" alt="node"></a>\n<a href="https://david-dm.org/webpack-contrib/file-loader"><img src="https://david-dm.org/webpack-contrib/file-loader.svg" alt="deps"></a>\n<a href="https://github.com/webpack-contrib/file-loader/actions"><img src="https://github.com/webpack-contrib/file-loader/workflows/file-loader/badge.svg" alt="tests"></a>\n<a href="https://codecov.io/gh/webpack-contrib/file-loader"><img src="https://codecov.io/gh/webpack-contrib/file-loader/branch/master/graph/badge.svg" alt="coverage"></a>\n<a href="https://gitter.im/webpack/webpack"><img src="https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg" alt="chat"></a>\n<a href="https://packagephobia.now.sh/result?p=file-loader"><img src="https://packagephobia.now.sh/badge?p=file-loader" alt="size"></a></p>\n<p><strong>DEPRECATED for v5</strong>: please consider migrating to <a href="/guides/asset-modules/"><code>asset modules</code></a>.</p>\n<p>The <code>file-loader</code> resolves <code>import</code>/<code>require()</code> on a file into a url and emits the file into the output directory.</p>\n<h2 id="getting-started">Getting Started<a href="#getting-started" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>To begin, you\'ll need to install <code>file-loader</code>:</p>\n<pre><code class="hljs language-console">$ npm install file-loader --save-dev\n</code></pre>\n<p>Import (or <code>require</code>) the target file(s) in one of the bundle\'s files:</p>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> img <span class="token keyword">from</span> <span class="token string">\'./file.png\'</span><span class="token punctuation">;</span></code></pre>\n<p>Then add the loader to your <code>webpack</code> config. For example:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>And run <code>webpack</code> via your preferred method. This will emit <code>file.png</code> as a file\nin the output directory (with the specified naming convention, if options are\nspecified to do so) and returns the public URI of the file.</p>\n<blockquote>\n<p>ℹ️ By default the filename of the resulting file is the hash of the file\'s contents with the original extension of the required resource.</p>\n</blockquote>\n<h2 id="options">Options<a href="#options" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<h3 id="name"><code>name</code><a href="#name" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|Function</code>\nDefault: <code>\'[contenthash].[ext]\'</code></p>\n<p>Specifies a custom filename template for the target file(s) using the query\nparameter <code>name</code>. For example, to emit a file from your <code>context</code> directory into\nthe output directory retaining the full directory structure, you might use:</p>\n<h4 id="string"><code>String</code><a href="#string" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n name<span class="token punctuation">:</span> <span class="token string">\'[path][name].[ext]\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="function"><code>Function</code><a href="#function" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n <span class="token function">name</span><span class="token punctuation">(</span>resourcePath<span class="token punctuation">,</span> resourceQuery<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token comment">// `resourcePath` - `/absolute/path/to/file.js`</span>\n <span class="token comment">// `resourceQuery` - `?foo=bar`</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">\'development\'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token string">\'[path][name].[ext]\'</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token string">\'[contenthash].[ext]\'</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<blockquote>\n<p>ℹ️ 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.</p>\n</blockquote>\n<h3 id="outputpath"><code>outputPath</code><a href="#outputpath" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|Function</code>\nDefault: <code>undefined</code></p>\n<p>Specify a filesystem path where the target file(s) will be placed.</p>\n<h4 id="string-1"><code>String</code><a href="#string-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n outputPath<span class="token punctuation">:</span> <span class="token string">\'images\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="function-1"><code>Function</code><a href="#function-1" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n outputPath<span class="token punctuation">:</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> resourcePath<span class="token punctuation">,</span> context<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// `resourcePath` is original absolute path to asset</span>\n <span class="token comment">// `context` is directory where stored asset (`rootContext`) or `context` option</span>\n\n <span class="token comment">// To get relative path you can use</span>\n <span class="token comment">// const relativePath = path.relative(context, resourcePath);</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/my-custom-image\\.png/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>resourcePath<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`other_output_path/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/images/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`image_output_path/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`output_path/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="publicpath"><code>publicPath</code><a href="#publicpath" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String|Function</code>\nDefault: <a href="/api/module-variables/#__webpack_public_path__-webpack-specific"><code>__webpack_public_path__</code></a>+outputPath</p>\n<p>Specifies a custom public path for the target file(s).</p>\n<h4 id="string-2"><code>String</code><a href="#string-2" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n publicPath<span class="token punctuation">:</span> <span class="token string">\'assets\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h4 id="function-2"><code>Function</code><a href="#function-2" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n publicPath<span class="token punctuation">:</span> <span class="token punctuation">(</span>url<span class="token punctuation">,</span> resourcePath<span class="token punctuation">,</span> context<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token comment">// `resourcePath` is original absolute path to asset</span>\n <span class="token comment">// `context` is directory where stored asset (`rootContext`) or `context` option</span>\n\n <span class="token comment">// To get relative path you can use</span>\n <span class="token comment">// const relativePath = path.relative(context, resourcePath);</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/my-custom-image\\.png/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>resourcePath<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`other_public_path/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex">/images/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`image_output_path/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`public_path/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="posttransformpublicpath"><code>postTransformPublicPath</code><a href="#posttransformpublicpath" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Function</code>\nDefault: <code>undefined</code></p>\n<p>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 <code>__webpack_public_path__</code>. This would not be possible with just <code>publicPath</code>, since it stringifies the values.</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpg|gif)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n publicPath<span class="token punctuation">:</span> <span class="token string">\'/some/path/\'</span><span class="token punctuation">,</span>\n postTransformPublicPath<span class="token punctuation">:</span> <span class="token punctuation">(</span>p<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token string">`__webpack_public_path__ + </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="context"><code>context</code><a href="#context" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <a href="/configuration/entry-context/#context"><code>context</code></a></p>\n<p>Specifies a custom file context.</p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n context<span class="token punctuation">:</span> <span class="token string">\'project\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="emitfile"><code>emitFile</code><a href="#emitfile" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean</code>\nDefault: <code>true</code></p>\n<p>If true, emits a file (writes a file to the filesystem). If false, the loader\nwill return a public URI but <strong>will not</strong> emit the file. It is often useful to\ndisable this option for server-side packages.</p>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token comment">// bundle file</span>\n<span class="token keyword">import</span> img <span class="token keyword">from</span> <span class="token string">\'./file.png\'</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n emitFile<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="regexp"><code>regExp</code><a href="#regexp" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>RegExp</code>\nDefault: <code>undefined</code></p>\n<p>Specifies a Regular Expression to one or many parts of the target file path.\nThe capture groups can be reused in the <code>name</code> property using <code>[N]</code>\n<a href="https://github.com/webpack-contrib/file-loader#placeholders">placeholder</a>.</p>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> img <span class="token keyword">from</span> <span class="token string">\'./customer01/file.png\'</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n regExp<span class="token punctuation">:</span> <span class="token regex">/\\/([a-z0-9]+)\\/[a-z0-9]+\\.png$/i</span><span class="token punctuation">,</span>\n name<span class="token punctuation">:</span> <span class="token string">\'[1]-[name].[ext]\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<blockquote>\n<p>ℹ️ If <code>[0]</code> is used, it will be replaced by the entire tested string, whereas <code>[1]</code> will contain the first capturing parenthesis of your regex and so on...</p>\n</blockquote>\n<h3 id="esmodule"><code>esModule</code><a href="#esmodule" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>Boolean</code>\nDefault: <code>true</code></p>\n<p>By default, <code>file-loader</code> generates JS modules that use the ES modules syntax.\nThere are some cases in which using ES modules is beneficial, like in the case of <a href="/plugins/module-concatenation-plugin/">module concatenation</a> and <a href="/guides/tree-shaking/">tree shaking</a>.</p>\n<p>You can enable a CommonJS module syntax using:</p>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.css$/</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n esModule<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h2 id="placeholders">Placeholders<a href="#placeholders" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>Full information about placeholders you can find <a href="https://github.com/webpack/loader-utils#interpolatename">here</a>.</p>\n<h3 id="ext"><code>[ext]</code><a href="#ext" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>file.extname</code></p>\n<p>The file extension of the target file/resource.</p>\n<h3 id="name-1"><code>[name]</code><a href="#name-1" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>file.basename</code></p>\n<p>The basename of the file/resource.</p>\n<h3 id="path"><code>[path]</code><a href="#path" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>file.directory</code></p>\n<p>The path of the resource relative to the webpack/config <code>context</code>.</p>\n<h3 id="folder"><code>[folder]</code><a href="#folder" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>file.folder</code></p>\n<p>The folder of the resource is in.</p>\n<h3 id="query"><code>[query]</code><a href="#query" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>file.query</code></p>\n<p>The query of the resource, i.e. <code>?foo=bar</code>.</p>\n<h3 id="emoji"><code>[emoji]</code><a href="#emoji" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>undefined</code></p>\n<p>A random emoji representation of <code>content</code>.</p>\n<h3 id="emojilength"><code>[emoji:<length>]</code><a href="#emojilength" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>undefined</code></p>\n<p>Same as above, but with a customizable number of emojis</p>\n<h3 id="hash"><code>[hash]</code><a href="#hash" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>md4</code></p>\n<p>Specifies the hash method to use for hashing the file content.</p>\n<h3 id="contenthash"><code>[contenthash]</code><a href="#contenthash" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>md4</code></p>\n<p>Specifies the hash method to use for hashing the file content.</p>\n<h3 id="hashtypehashdigesttypelength"><code>[<hashType>:hash:<digestType>:<length>]</code><a href="#hashtypehashdigesttypelength" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code></p>\n<p>The hash of options.content (Buffer) (by default it\'s the hex digest of the hash).</p>\n<h4 id="digesttype"><code>digestType</code><a href="#digesttype" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Type: <code>String</code>\nDefault: <code>\'hex\'</code></p>\n<p>The <a href="https://en.wikipedia.org/wiki/Cryptographic_hash_function">digest</a> that the\nhash function should use. Valid values include: base26, base32, base36,\nbase49, base52, base58, base62, base64, and hex.</p>\n<h4 id="hashtype"><code>hashType</code><a href="#hashtype" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Type: <code>String</code>\nDefault: <code>\'md4\'</code></p>\n<p>The type of hash that the hash function should use. Valid values include: <code>md4</code>, <code>md5</code>, <code>sha1</code>, <code>sha256</code>, and <code>sha512</code>.</p>\n<h4 id="length"><code>length</code><a href="#length" aria-hidden="true"><span class="icon icon-link"></span></a></h4>\n<p>Type: <code>Number</code>\nDefault: <code>undefined</code></p>\n<p>Users may also specify a length for the computed hash.</p>\n<h3 id="n"><code>[N]</code><a href="#n" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Type: <code>String</code>\nDefault: <code>undefined</code></p>\n<p>The n-th match obtained from matching the current file name against the <code>regExp</code>.</p>\n<h2 id="examples">Examples<a href="#examples" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<h3 id="names">Names<a href="#names" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The following examples show how one might use <code>file-loader</code> and what the result would be.</p>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> png <span class="token keyword">from</span> <span class="token string">\'./image.png\'</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n name<span class="token punctuation">:</span> <span class="token string">\'dirname/[contenthash].[ext]\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Result:</p>\n<pre><code class="hljs language-bash"><span class="token comment"># result</span>\ndirname/0dcbbaa701328ae351f.png</code></pre>\n<hr>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> png <span class="token keyword">from</span> <span class="token string">\'./image.png\'</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n name<span class="token punctuation">:</span> <span class="token string">\'[sha512:hash:base64:7].[ext]\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Result:</p>\n<pre><code class="hljs language-bash"><span class="token comment"># result</span>\ngdyb21L.png</code></pre>\n<hr>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> png <span class="token keyword">from</span> <span class="token string">\'./path/to/file.png\'</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n name<span class="token punctuation">:</span> <span class="token string">\'[path][name].[ext]?[contenthash]\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Result:</p>\n<pre><code class="hljs language-bash"><span class="token comment"># result</span>\npath/to/file.png?e43b20c069c4a01867c31e98cbce33c9</code></pre>\n<h3 id="cdn">CDN<a href="#cdn" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The following examples show how to use <code>file-loader</code> for CDN uses query params.</p>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> png <span class="token keyword">from</span> <span class="token string">\'./directory/image.png?width=300&height=300\'</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n output<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n publicPath<span class="token punctuation">:</span> <span class="token string">\'https://cdn.example.com/\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpe?g|gif)$/i</span><span class="token punctuation">,</span>\n use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n name<span class="token punctuation">:</span> <span class="token string">\'[path][name].[ext][query]\'</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Result:</p>\n<pre><code class="hljs language-bash"><span class="token comment"># result</span>\nhttps://cdn.example.com/directory/image.png?width<span class="token operator">=</span>300<span class="token operator">&</span>height<span class="token operator">=</span>300</code></pre>\n<h3 id="dynamic-public-path-depending-on-environment-variable-at-run-time">Dynamic public path depending on environment variable at run time<a href="#dynamic-public-path-depending-on-environment-variable-at-run-time" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>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 differently 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 <code>__webpack_public_path__</code> to the desired CDN host depending on the environment variable at the entrypoint of the application. The option <code>postTransformPublicPath</code> can be used to configure a custom path depending on a variable like <code>__webpack_public_path__</code>.</p>\n<p><strong>main.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">const</span> <span class="token function-variable function">assetPrefixForNamespace</span> <span class="token operator">=</span> <span class="token punctuation">(</span>namespace<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">switch</span> <span class="token punctuation">(</span>namespace<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">case</span> <span class="token string">\'prod\'</span><span class="token punctuation">:</span>\n <span class="token keyword">return</span> <span class="token string">\'https://cache.myserver.net/web\'</span><span class="token punctuation">;</span>\n <span class="token keyword">case</span> <span class="token string">\'uat\'</span><span class="token punctuation">:</span>\n <span class="token keyword">return</span> <span class="token string">\'https://cache-uat.myserver.net/web\'</span><span class="token punctuation">;</span>\n <span class="token keyword">case</span> <span class="token string">\'st\'</span><span class="token punctuation">:</span>\n <span class="token keyword">return</span> <span class="token string">\'https://cache-st.myserver.net/web\'</span><span class="token punctuation">;</span>\n <span class="token keyword">case</span> <span class="token string">\'dev\'</span><span class="token punctuation">:</span>\n <span class="token keyword">return</span> <span class="token string">\'https://cache-dev.myserver.net/web\'</span><span class="token punctuation">;</span>\n <span class="token keyword">default</span><span class="token punctuation">:</span>\n <span class="token keyword">return</span> <span class="token string">\'\'</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> namespace <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NAMESPACE</span><span class="token punctuation">;</span>\n\n__webpack_public_path__ <span class="token operator">=</span> <span class="token template-string"><span class="token string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">assetPrefixForNamespace</span><span class="token punctuation">(</span>namespace<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/`</span></span><span class="token punctuation">;</span></code></pre>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-js"><span class="token keyword">import</span> png <span class="token keyword">from</span> <span class="token string">\'./image.png\'</span><span class="token punctuation">;</span></code></pre>\n<p><strong>webpack.config.js</strong></p>\n<pre><code class="hljs language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n module<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n <span class="token punctuation">{</span>\n test<span class="token punctuation">:</span> <span class="token regex">/\\.(png|jpg|gif)$/i</span><span class="token punctuation">,</span>\n loader<span class="token punctuation">:</span> <span class="token string">\'file-loader\'</span><span class="token punctuation">,</span>\n options<span class="token punctuation">:</span> <span class="token punctuation">{</span>\n name<span class="token punctuation">:</span> <span class="token string">\'[name].[contenthash].[ext]\'</span><span class="token punctuation">,</span>\n outputPath<span class="token punctuation">:</span> <span class="token string">\'static/assets/\'</span><span class="token punctuation">,</span>\n publicPath<span class="token punctuation">:</span> <span class="token string">\'static/assets/\'</span><span class="token punctuation">,</span>\n postTransformPublicPath<span class="token punctuation">:</span> <span class="token punctuation">(</span>p<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token string">`__webpack_public_path__ + </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>p<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n <span class="token punctuation">]</span><span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Result when run with <code>NAMESPACE=prod</code> env variable:</p>\n<pre><code class="hljs language-bash"><span class="token comment"># result</span>\nhttps://cache.myserver.net/web/static/assets/image.somehash.png</code></pre>\n<p>Result when run with <code>NAMESPACE=dev</code> env variable:</p>\n<pre><code class="hljs language-bash"><span class="token comment"># result</span>\nhttps://cache-dev.myserver.net/web/static/assets/image.somehash.png</code></pre>\n<h2 id="contributing">Contributing<a href="#contributing" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>Please take a moment to read our contributing guidelines if you haven\'t yet done so.</p>\n<p><a href="https://github.com/webpack-contrib/file-loader/blob/master/.github/CONTRIBUTING.md">CONTRIBUTING</a></p>\n<h2 id="license">License<a href="#license" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p><a href="https://github.com/webpack-contrib/file-loader/blob/master/LICENSE">MIT</a></p>\n'}}]);