16.30ec2da27456b59ac060.chunk.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{272:function(n,s,a){"use strict";a.r(s),s.default='<p>A loader is just a JavaScript module that exports a function. The <a href="https://github.com/webpack/loader-runner">loader runner</a> calls this function and passes the result of the previous loader or the resource file into it. The <code>this</code> context of the function is filled-in by webpack and the <a href="https://github.com/webpack/loader-runner">loader runner</a> with some useful methods that allow the loader (among other things) to change its invocation style to async, or get query parameters.</p>\n<p>The first loader is passed one argument: the content of the resource file. The compiler expects a result from the last loader. The result should be a <code>String</code> or a <code>Buffer</code> (which is converted to a string), representing the JavaScript source code of the module. An optional SourceMap result (as a JSON object) may also be passed.</p>\n<p>A single result can be returned in <strong>sync mode</strong>. For multiple results the <code>this.callback()</code> must be called. In <strong>async mode</strong> <code>this.async()</code> must be called to indicate that the <a href="https://github.com/webpack/loader-runner">loader runner</a> should wait for an asynchronous result. It returns <code>this.callback()</code>. Then the loader must return <code>undefined</code> and call that callback.</p>\n<h2 id="examples">Examples<a href="#examples" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>The following sections provide some basic examples of the different types of loaders. Note that the <code>map</code> and <code>meta</code> parameters are optional, see <a href="#thiscallback"><code>this.callback</code></a> below.</p>\n<h3 id="synchronous-loaders">Synchronous Loaders<a href="#synchronous-loaders" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Either <code>return</code> or <code>this.callback</code> can be used to return the transformed <code>content</code> synchronously:</p>\n<p><strong>sync-loader.js</strong></p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> map<span class="token punctuation">,</span> meta<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token function">someSyncOperation</span><span class="token punctuation">(</span>content<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>The <code>this.callback</code> method is more flexible as it allows multiple arguments to be passed as opposed to just the <code>content</code>.</p>\n<p><strong>sync-loader-with-multiple-results.js</strong></p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> map<span class="token punctuation">,</span> meta<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token function">someSyncOperation</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">,</span> map<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">// always return undefined when calling callback()</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<h3 id="asynchronous-loaders">Asynchronous Loaders<a href="#asynchronous-loaders" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>For asynchronous loaders, <a href="#thisasync"><code>this.async</code></a> is used to retrieve the <code>callback</code> function:</p>\n<p><strong>async-loader.js</strong></p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> map<span class="token punctuation">,</span> meta<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">var</span> callback <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token function">someAsyncOperation</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> result<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> result<span class="token punctuation">,</span> map<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><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><strong>async-loader-with-multiple-results.js</strong></p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> map<span class="token punctuation">,</span> meta<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">var</span> callback <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token function">someAsyncOperation</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> result<span class="token punctuation">,</span> sourceMaps<span class="token punctuation">,</span> meta<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">callback</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> result<span class="token punctuation">,</span> sourceMaps<span class="token punctuation">,</span> meta<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token punctuation">}</span><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 class="tip">\n<p>Loaders were originally designed to work in synchronous loader pipelines, like Node.js (using <a href="https://github.com/webpack/enhanced-require">enhanced-require</a>), <em>and</em> asynchronous pipelines, like in webpack. However, since expensive synchronous computations are a bad idea in a single-threaded environment like Node.js, we advise making your loader asynchronous if possible. Synchronous loaders are ok if the amount of computation is trivial.</p>\n</blockquote>\n<h3 id="raw-loader">"Raw" Loader<a href="#raw-loader" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>By default, the resource file is converted to a UTF-8 string and passed to the loader. By setting the <code>raw</code> flag, the loader will receive the raw <code>Buffer</code>. Every loader is allowed to deliver its result as <code>String</code> or as <code>Buffer</code>. The compiler converts them between loaders.</p>\n<p><strong>raw-loader.js</strong></p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token function">assert</span><span class="token punctuation">(</span>content <span class="token keyword">instanceof</span> <span class="token class-name">Buffer</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">return</span> <span class="token function">someSyncOperation</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token comment">// return value can be a `Buffer` too</span>\n  <span class="token comment">// This is also allowed if loader is not "raw"</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\nmodule<span class="token punctuation">.</span>exports<span class="token punctuation">.</span>raw <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span></code></pre>\n<h3 id="pitching-loader">Pitching Loader<a href="#pitching-loader" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Loaders are <strong>always</strong> called from right to left. There are some instances where the loader only cares about the <strong>metadata</strong> behind a request and can ignore the results of the previous loader. The <code>pitch</code> method on loaders is called from <strong>left to right</strong> before the loaders are actually executed (from right to left).</p>\n<blockquote class="tip">\n<p>Loaders may be added inline in requests and disabled via inline prefixes, which will impact the order in which they are "pitched" and executed. See <a href="/configuration/module/#ruleenforce"><code>Rule.enforce</code></a> for more details.</p>\n</blockquote>\n<p>For the following configuration of <a href="/configuration/module/#ruleuse"><code>use</code></a>:</p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>\n  <span class="token comment">//...</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        <span class="token comment">//...</span>\n        use<span class="token punctuation">:</span> <span class="token punctuation">[</span>\n          <span class="token string">\'a-loader\'</span><span class="token punctuation">,</span>\n          <span class="token string">\'b-loader\'</span><span class="token punctuation">,</span>\n          <span class="token string">\'c-loader\'</span>\n        <span class="token punctuation">]</span>\n      <span class="token punctuation">}</span>\n    <span class="token punctuation">]</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>These steps would occur:</p>\n<pre><code class="hljs language-diff">|- a-loader `pitch`\n  |- b-loader `pitch`\n    |- c-loader `pitch`\n      |- requested module is picked up as a dependency\n    |- c-loader normal execution\n  |- b-loader normal execution\n|- a-loader normal execution</code></pre>\n<p>So why might a loader take advantage of the "pitching" phase?</p>\n<p>First, the <code>data</code> passed to the <code>pitch</code> method is exposed in the execution phase as well under <code>this.data</code> and could be useful for capturing and sharing information from earlier in the cycle.</p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token function">someSyncOperation</span><span class="token punctuation">(</span>content<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">pitch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>remainingRequest<span class="token punctuation">,</span> precedingRequest<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  data<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">42</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p>Second, if a loader delivers a result in the <code>pitch</code> method, the process turns around and skips the remaining loaders. In our example above, if the <code>b-loader</code>s <code>pitch</code> method returned something:</p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">return</span> <span class="token function">someSyncOperation</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span>exports<span class="token punctuation">.</span><span class="token function-variable function">pitch</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>remainingRequest<span class="token punctuation">,</span> precedingRequest<span class="token punctuation">,</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">someCondition</span><span class="token punctuation">(</span><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 string">\'module.exports = require(\'</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span><span class="token string">\'-!\'</span> <span class="token operator">+</span> remainingRequest<span class="token punctuation">)</span> <span class="token operator">+</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></code></pre>\n<p>The steps above would be shortened to:</p>\n<pre><code class="hljs language-diff">|- a-loader `pitch`\n  |- b-loader `pitch` returns a module\n|- a-loader normal execution</code></pre>\n<p>See the <a href="https://github.com/webpack-contrib/bundle-loader">bundle-loader</a> for a good example of how this process can be used in a more meaningful way.</p>\n<h2 id="the-loader-context">The Loader Context<a href="#the-loader-context" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>The loader context represents the properties that are available inside of a loader assigned to the <code>this</code> property.</p>\n<p>Given the following example, this require call is used:</p>\n<p>In <code>/abc/file.js</code>:</p>\n<pre><code class="hljs language-javascript"><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'./loader1?xyz!loader2!./resource?rrr\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<h3 id="thisversion"><code>this.version</code><a href="#thisversion" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p><strong>Loader API version.</strong> Currently <code>2</code>. This is useful for providing backwards compatibility. Using the version you can specify custom logic or fallbacks for breaking changes.</p>\n<h3 id="thiscontext"><code>this.context</code><a href="#thiscontext" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p><strong>The directory of the module.</strong> Can be used as a context for resolving other stuff.</p>\n<p>In the example: <code>/abc</code> because <code>resource.js</code> is in this directory</p>\n<h3 id="thisrootcontext"><code>this.rootContext</code><a href="#thisrootcontext" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Starting with webpack 4, the formerly <code>this.options.context</code> is provided as <code>this.rootContext</code>.</p>\n<h3 id="thisrequest"><code>this.request</code><a href="#thisrequest" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The resolved request string.</p>\n<p>In the example: <code>"/abc/loader1.js?xyz!/abc/node_modules/loader2/index.js!/abc/resource.js?rrr"</code></p>\n<h3 id="thisquery"><code>this.query</code><a href="#thisquery" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<ol>\n<li>If the loader was configured with an <a href="/configuration/module/#useentry"><code>options</code></a> object, this will point to that object.</li>\n<li>If the loader has no <code>options</code>, but was invoked with a query string, this will be a string starting with <code>?</code>.</li>\n</ol>\n<blockquote class="tip">\n<p>Use the <a href="https://github.com/webpack/loader-utils#getoptions"><code>getOptions</code> method</a> from <code>loader-utils</code> to extract given loader options.</p>\n</blockquote>\n<h3 id="thiscallback"><code>this.callback</code><a href="#thiscallback" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>A function that can be called synchronously or asynchronously in order to return multiple results. The expected arguments are:</p>\n\x3c!-- eslint-skip --\x3e\n<pre><code class="hljs language-javascript"><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">callback</span><span class="token punctuation">(</span>\n  err<span class="token punctuation">:</span> Error <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">,</span>\n  content<span class="token punctuation">:</span> string <span class="token operator">|</span> Buffer<span class="token punctuation">,</span>\n  sourceMap<span class="token operator">?</span><span class="token punctuation">:</span> SourceMap<span class="token punctuation">,</span>\n  meta<span class="token operator">?</span><span class="token punctuation">:</span> any\n<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<ol>\n<li>The first argument must be an <code>Error</code> or <code>null</code></li>\n<li>The second argument is a <code>string</code> or a <a href="https://nodejs.org/api/buffer.html"><code>Buffer</code></a>.</li>\n<li>Optional: The third argument must be a source map that is parsable by <a href="https://github.com/mozilla/source-map">this module</a>.</li>\n<li>Optional: The fourth option, ignored by webpack, can be anything (e.g. some metadata).</li>\n</ol>\n<blockquote class="tip">\n<p>It can be useful to pass an abstract syntax tree (AST), like <a href="https://github.com/estree/estree"><code>ESTree</code></a>, as the fourth argument (<code>meta</code>) to speed up the build time if you want to share common ASTs between loaders.</p>\n</blockquote>\n<p>In case this function is called, you should return undefined to avoid ambiguous loader results.</p>\n<h3 id="thisasync"><code>this.async</code><a href="#thisasync" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Tells the <a href="https://github.com/webpack/loader-runner">loader-runner</a> that the loader intends to call back asynchronously. Returns <code>this.callback</code>.</p>\n<h3 id="thisdata"><code>this.data</code><a href="#thisdata" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>A data object shared between the pitch and the normal phase.</p>\n<h3 id="thiscacheable"><code>this.cacheable</code><a href="#thiscacheable" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>A function that sets the cacheable flag:</p>\n<pre><code class="hljs language-typescript"><span class="token function">cacheable</span><span class="token punctuation">(</span>flag <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span></code></pre>\n<p>By default, loader results are flagged as cacheable. Call this method passing <code>false</code> to make the loader\'s result not cacheable.</p>\n<p>A cacheable loader must have a deterministic result when inputs and dependencies haven\'t changed. This means the loader shouldn\'t have dependencies other than those specified with <code>this.addDependency</code>.</p>\n<h3 id="thisloaders"><code>this.loaders</code><a href="#thisloaders" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>An array of all the loaders. It is writable in the pitch phase.</p>\n\x3c!-- eslint-skip --\x3e\n<pre><code class="hljs language-javascript">loaders <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>request<span class="token punctuation">:</span> string<span class="token punctuation">,</span> path<span class="token punctuation">:</span> string<span class="token punctuation">,</span> query<span class="token punctuation">:</span> string<span class="token punctuation">,</span> module<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">}</span><span class="token punctuation">]</span></code></pre>\n<p>In the example:</p>\n<pre><code class="hljs language-javascript"><span class="token punctuation">[</span>\n  <span class="token punctuation">{</span>\n    request<span class="token punctuation">:</span> <span class="token string">\'/abc/loader1.js?xyz\'</span><span class="token punctuation">,</span>\n    path<span class="token punctuation">:</span> <span class="token string">\'/abc/loader1.js\'</span><span class="token punctuation">,</span>\n    query<span class="token punctuation">:</span> <span class="token string">\'?xyz\'</span><span class="token punctuation">,</span>\n    module<span class="token punctuation">:</span> <span class="token punctuation">[</span>Function<span class="token punctuation">]</span>\n  <span class="token punctuation">}</span><span class="token punctuation">,</span>\n  <span class="token punctuation">{</span>\n    request<span class="token punctuation">:</span> <span class="token string">\'/abc/node_modules/loader2/index.js\'</span><span class="token punctuation">,</span>\n    path<span class="token punctuation">:</span> <span class="token string">\'/abc/node_modules/loader2/index.js\'</span><span class="token punctuation">,</span>\n    query<span class="token punctuation">:</span> <span class="token string">\'\'</span><span class="token punctuation">,</span>\n    module<span class="token punctuation">:</span> <span class="token punctuation">[</span>Function<span class="token punctuation">]</span>\n  <span class="token punctuation">}</span>\n<span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre>\n<h3 id="thisloaderindex"><code>this.loaderIndex</code><a href="#thisloaderindex" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The index in the loaders array of the current loader.</p>\n<p>In the example: in loader1: <code>0</code>, in loader2: <code>1</code></p>\n<h3 id="thisresource"><code>this.resource</code><a href="#thisresource" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The resource part of the request, including query.</p>\n<p>In the example: <code>"/abc/resource.js?rrr"</code></p>\n<h3 id="thisresourcepath"><code>this.resourcePath</code><a href="#thisresourcepath" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The resource file.</p>\n<p>In the example: <code>"/abc/resource.js"</code></p>\n<h3 id="thisresourcequery"><code>this.resourceQuery</code><a href="#thisresourcequery" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>The query of the resource.</p>\n<p>In the example: <code>"?rrr"</code></p>\n<h3 id="thistarget"><code>this.target</code><a href="#thistarget" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Target of compilation. Passed from configuration options.</p>\n<p>Example values: <code>"web"</code>, <code>"node"</code></p>\n<h3 id="thiswebpack"><code>this.webpack</code><a href="#thiswebpack" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>This boolean is set to true when this is compiled by webpack.</p>\n<blockquote class="tip">\n<p>Loaders were originally designed to also work as Babel transforms. Therefore, if you write a loader that works for both, you can use this property to know if there is access to additional loaderContext and webpack features.</p>\n</blockquote>\n<h3 id="thissourcemap"><code>this.sourceMap</code><a href="#thissourcemap" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Tells if source map should be generated. Since generating source maps can be an expensive task, you should check if source maps are actually requested.</p>\n<h3 id="thisemitwarning"><code>this.emitWarning</code><a href="#thisemitwarning" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">emitWarning</span><span class="token punctuation">(</span>warning<span class="token punctuation">:</span> Error<span class="token punctuation">)</span></code></pre>\n<p>Emit a warning that will be displayed in the output like the following:</p>\n<pre><code class="hljs language-bash">WARNING <span class="token keyword">in</span> ./src/lib.js <span class="token punctuation">(</span>./src/loader.js<span class="token operator">!</span>./src/lib.js<span class="token punctuation">)</span>\nModule Warning <span class="token punctuation">(</span>from ./src/loader.js<span class="token punctuation">)</span>:\nHere is a Warning<span class="token operator">!</span>\n @ ./src/index.js 1:0-25</code></pre>\n<blockquote class="tip">\n<p>Note that the warnings will not be displayed if <code>stats.warnings</code> is set to <code>false</code>, or some other omit setting is used to <code>stats</code> such as <code>none</code> or <code>errors-only</code>. See the <a href="/configuration/stats/#stats">stats configuration</a>.</p>\n</blockquote>\n<h3 id="thisemiterror"><code>this.emitError</code><a href="#thisemiterror" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">emitError</span><span class="token punctuation">(</span>error<span class="token punctuation">:</span> Error<span class="token punctuation">)</span></code></pre>\n<p>Emit an error that also can be displayed in the output.</p>\n<pre><code class="hljs language-bash">ERROR <span class="token keyword">in</span> ./src/lib.js <span class="token punctuation">(</span>./src/loader.js<span class="token operator">!</span>./src/lib.js<span class="token punctuation">)</span>\nModule Error <span class="token punctuation">(</span>from ./src/loader.js<span class="token punctuation">)</span>:\nHere is an Error<span class="token operator">!</span>\n @ ./src/index.js 1:0-25</code></pre>\n<blockquote class="tip">\n<p>Unlike throwing an Error directly, it will NOT interrupt the compilation process of the current module.</p>\n</blockquote>\n<h3 id="thisloadmodule"><code>this.loadModule</code><a href="#thisloadmodule" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">loadModule</span><span class="token punctuation">(</span>request<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> source<span class="token punctuation">,</span> sourceMap<span class="token punctuation">,</span> <span class="token keyword">module</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>\n<p>Resolves the given request to a module, applies all configured loaders and calls back with the generated source, the sourceMap and the module instance (usually an instance of <a href="https://github.com/webpack/webpack/blob/master/lib/NormalModule.js"><code>NormalModule</code></a>). Use this function if you need to know the source code of another module to generate the result.</p>\n<h3 id="thisresolve"><code>this.resolve</code><a href="#thisresolve" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">resolve</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> request<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> callback<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> result<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">)</span></code></pre>\n<p>Resolve a request like a require expression.</p>\n<h3 id="thisadddependency"><code>this.addDependency</code><a href="#thisadddependency" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">addDependency</span><span class="token punctuation">(</span>file<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span>\n<span class="token function">dependency</span><span class="token punctuation">(</span>file<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token comment">// shortcut</span></code></pre>\n<p>Add a file as dependency of the loader result in order to make them watchable. For example, <a href="https://github.com/webpack-contrib/sass-loader"><code>sass-loader</code></a>, <a href="https://github.com/webpack-contrib/less-loader"><code>less-loader</code></a> uses this to recompile whenever any imported <code>css</code> file changes.</p>\n<h3 id="thisaddcontextdependency"><code>this.addContextDependency</code><a href="#thisaddcontextdependency" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">addContextDependency</span><span class="token punctuation">(</span>directory<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span></code></pre>\n<p>Add a directory as dependency of the loader result.</p>\n<h3 id="thiscleardependencies"><code>this.clearDependencies</code><a href="#thiscleardependencies" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">clearDependencies</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre>\n<p>Remove all dependencies of the loader result, even initial dependencies and those of other loaders. Consider using <code>pitch</code>.</p>\n<h3 id="thisemitfile"><code>this.emitFile</code><a href="#thisemitfile" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">emitFile</span><span class="token punctuation">(</span>name<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> content<span class="token punctuation">:</span> Buffer<span class="token operator">|</span><span class="token builtin">string</span><span class="token punctuation">,</span> sourceMap<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>\n<p>Emit a file. This is webpack-specific.</p>\n<h3 id="thisfs"><code>this.fs</code><a href="#thisfs" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Access to the <code>compilation</code>\'s <code>inputFileSystem</code> property.</p>\n<h3 id="thismode"><code>this.mode</code><a href="#thismode" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Read in which <a href="/configuration/mode/"><code>mode</code></a> webpack is running.</p>\n<p>Possible values: <code>\'production\'</code>, <code>\'development\'</code>, <code>\'none\'</code></p>\n<h2 id="deprecated-context-properties">Deprecated context properties<a href="#deprecated-context-properties" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<blockquote class="warning">\n<p>The usage of these properties is highly discouraged since we are planning to remove them from the context. They are still listed here for documentation purposes.</p>\n</blockquote>\n<h3 id="thisexec"><code>this.exec</code><a href="#thisexec" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">exec</span><span class="token punctuation">(</span>code<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> filename<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span></code></pre>\n<p>Execute some code fragment like a module. See <a href="https://github.com/webpack/webpack.js.org/issues/1268#issuecomment-313513988">this comment</a> for a replacement method if needed.</p>\n<h3 id="thisresolvesync"><code>this.resolveSync</code><a href="#thisresolvesync" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<pre><code class="hljs language-typescript"><span class="token function">resolveSync</span><span class="token punctuation">(</span>context<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span> request<span class="token punctuation">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token builtin">string</span></code></pre>\n<p>Resolve a request like a require expression.</p>\n<h3 id="thisvalue"><code>this.value</code><a href="#thisvalue" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Pass values to the next loader. If you know what your result exports if executed as a module, set this value here (as an only element array).</p>\n<h3 id="thisinputvalue"><code>this.inputValue</code><a href="#thisinputvalue" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Passed from the last loader. If you would execute the input argument as a module, consider reading this variable for a shortcut (for performance).</p>\n<h3 id="thisoptions"><code>this.options</code><a href="#thisoptions" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<blockquote class="warning">\n<p>The <code>options</code> property has been deprecated in webpack 3 and removed in webpack 4.</p>\n</blockquote>\n<h3 id="thisdebug"><code>this.debug</code><a href="#thisdebug" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>A boolean flag. It is set when in debug mode.</p>\n<h3 id="thisminimize"><code>this.minimize</code><a href="#thisminimize" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Tells if result should be minimized.</p>\n<h3 id="this_compilation"><code>this._compilation</code><a href="#this_compilation" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Hacky access to the Compilation object of webpack.</p>\n<h3 id="this_compiler"><code>this._compiler</code><a href="#this_compiler" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Hacky access to the Compiler object of webpack.</p>\n<h3 id="this_module"><code>this._module</code><a href="#this_module" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>Hacky access to the Module object being loaded.</p>\n<h2 id="error-reporting">Error Reporting<a href="#error-reporting" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>You can report errors from inside a loader by:</p>\n<ul>\n<li>Using <a href="/api/loaders/#thisemiterror">this.emitError</a>. Will report the errors without interrupting module\'s compilation.</li>\n<li>Using <code>throw</code> (or other uncaught exception). Throwing an error while a loader is running will cause current module compilation failure.</li>\n<li>Using <code>callback</code> (in async mode). Pass an error to the callback will also cause module compilation failure.</li>\n</ul>\n<p>For example:</p>\n<p><strong>./src/index.js</strong></p>\n<pre><code class="hljs language-javascript"><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'./loader!./lib\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>Throwing an error from loader:</p>\n<p><strong>./src/loader.js</strong></p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'This is a Fatal Error!\'</span><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>Or pass an error to the callback in async mode:</p>\n<p><strong>./src/loader.js</strong></p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> callback <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token comment">//...</span>\n  <span class="token function">callback</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">\'This is a Fatal Error!\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> source<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>The module will get bundled like this:</p>\n\x3c!-- eslint-skip --\x3e\n<pre><code class="hljs language-javascript"><span class="token comment">/***/</span> <span class="token string">"./src/loader.js!./src/lib.js"</span><span class="token punctuation">:</span>\n<span class="token comment">/*!************************************!*\\\n  !*** ./src/loader.js!./src/lib.js ***!\n  \\************************************/</span>\n<span class="token comment">/*! no static exports found */</span>\n<span class="token comment">/***/</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>module<span class="token punctuation">,</span> exports<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n\n<span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"Module build failed (from ./src/loader.js):\\nError: This is a Fatal Error!\\n    at Object.module.exports (/workspace/src/loader.js:3:9)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n<span class="token comment">/***/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre>\n<p>Then the build output will also display the error (Similar to <code>this.emitError</code>):</p>\n<pre><code class="hljs language-bash">ERROR <span class="token keyword">in</span> ./src/lib.js <span class="token punctuation">(</span>./src/loader.js<span class="token operator">!</span>./src/lib.js<span class="token punctuation">)</span>\nModule build failed <span class="token punctuation">(</span>from ./src/loader.js<span class="token punctuation">)</span>:\nError: This is a Fatal Error<span class="token operator">!</span>\n    at Object.module.exports <span class="token punctuation">(</span>/workspace/src/loader.js:2:9<span class="token punctuation">)</span>\n @ ./src/index.js 1:0-25</code></pre>\n<p>As you can see below, not only error message, but also details about which loader and module are involved:</p>\n<ul>\n<li>the module path: <code>ERROR in ./src/lib.js</code></li>\n<li>the request string: <code>(./src/loader.js!./src/lib.js)</code></li>\n<li>the loader path: <code>(from ./src/loader.js)</code></li>\n<li>the caller path: <code>@ ./src/index.js 1:0-25</code></li>\n</ul>\n<blockquote class="warning">\n<p>The loader path in the error is displayed since webpack 4.12</p>\n</blockquote>\n<blockquote class="tip">\n<p>All the errors and warnings will be recorded into <code>stats</code>. Please see <a href="/api/stats/#errors-and-warnings">Stats Data</a>.</p>\n</blockquote>\n<h3 id="inline-matchresource">Inline matchResource<a href="#inline-matchresource" aria-hidden="true"><span class="icon icon-link"></span></a></h3>\n<p>A new inline request syntax was introduced in webpack v4. Prefixing <code>&#x3C;match-resource>!=!</code> to a request will set the <code>matchResource</code> for this request.</p>\n<blockquote class="warning">\n<p>It is not recommended to use this syntax in application code.\nInline request syntax is intended to only be used by loader generated code.\nNot following this recommendation will make your code webpack-specific and non-standard.</p>\n</blockquote>\n<blockquote class="tip">\n<p>A relative <code>matchResource</code> will resolve relative to the current context of the containing module.</p>\n</blockquote>\n<p>When a <code>matchResource</code> is set, it will be used to match with the <a href="/configuration/module/#modulerules"><code>module.rules</code></a> instead of the original resource. This can be useful if further loaders should be applied to the resource, or if the module type needs to be changed. It\'s also displayed in the stats and used for matching <a href="/configuration/module/#ruleissuer"><code>Rule.issuer</code></a> and <a href="/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest"><code>test</code> in <code>splitChunks</code></a>.</p>\n<p>Example:</p>\n<p><strong>file.js</strong></p>\n<pre><code class="hljs language-javascript"><span class="token comment">/* STYLE: body { background: red; } */</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'yep\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>A loader could transform the file into the following file and use the <code>matchResource</code> to apply the user-specified CSS processing rules:</p>\n<p><strong>file.js</strong> (transformed by loader)</p>\n<pre><code class="hljs language-javascript"><span class="token keyword">import</span> <span class="token string">\'./file.js.css!=!extract-style-loader/getStyles!./file.js\'</span><span class="token punctuation">;</span>\nconsole<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">\'yep\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>\n<p>This will add a dependency to <code>extract-style-loader/getStyles!./file.js</code> and treat the result as <code>file.js.css</code>. Because <a href="/configuration/module/#modulerules"><code>module.rules</code></a> has a rule matching <code>/\\.css$/</code> and it will apply to this dependency.</p>\n<p>The loader could look like this:</p>\n<p><strong>extract-style-loader/index.js</strong></p>\n<pre><code class="hljs language-javascript"><span class="token keyword">const</span> stringifyRequest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'loader-utils\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>stringifyRequest<span class="token punctuation">;</span>\n<span class="token keyword">const</span> getRemainingRequest <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">\'loader-utils\'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>getRemainingRequest<span class="token punctuation">;</span>\n<span class="token keyword">const</span> getStylesLoader <span class="token operator">=</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">\'./getStyle\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\nmodule<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>source<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token constant">STYLES_REGEXP</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    source <span class="token operator">=</span> source<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token constant">STYLES_REGEXP</span><span class="token punctuation">,</span> <span class="token string">\'\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">const</span> remReq <span class="token operator">=</span> <span class="token function">getRemainingRequest</span><span class="token punctuation">(</span><span class="token keyword">this</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">`import ${stringifyRequest(`</span></span>$<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>resource<span class="token punctuation">}</span><span class="token punctuation">.</span>css<span class="token operator">!=</span><span class="token operator">!</span>$<span class="token punctuation">{</span>getStylesLoader<span class="token punctuation">}</span><span class="token operator">!</span>$<span class="token punctuation">{</span>remReq<span class="token punctuation">}</span><span class="token template-string"><span class="token string">`)};</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>source<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  <span class="token keyword">return</span> source<span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>\n<p><strong>extract-style-loader/getStyles.js</strong></p>\n<pre><code class="hljs language-javascript">module<span class="token punctuation">.</span><span class="token function-variable function">exports</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token keyword">const</span> match <span class="token operator">=</span> <span class="token constant">STYLES_REGEXP</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>source<span class="token punctuation">)</span><span class="token punctuation">;</span>\n  <span class="token keyword">return</span> match<span class="token punctuation">[</span><span class="token number">0</span><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="logging">Logging<a href="#logging" aria-hidden="true"><span class="icon icon-link"></span></a></h2>\n<p>Logging API is available since the release of webpack 4.37. When <code>logging</code> is enabled in <a href="/configuration/stats/#statslogging"><code>stats configuration</code></a> and/or when <a href="/configuration/other-options/#infrastructurelogging"><code>infrastructure logging</code></a> is enabled, loaders may log messages which will be printed out in the respective logger format (stats, infrastructure).</p>\n<ul>\n<li>Loaders should prefer to use <code>this.getLogger()</code> for logging which is a shortcut to <code>compilation.getLogger()</code> with loader path and processed file. This kind of logging is stored to the Stats and formatted accordingly. It can be filtered and exported by the webpack user.</li>\n<li>Loaders may use <code>this.getLogger(\'name\')</code> to get an independent logger with a child name. Loader path and processed file is still added.</li>\n<li>Loaders may use special fallback logic for detecting logging support <code>this.getLogger() ? this.getLogger() : console</code> to provide a fallback when an older webpack version is used which does not support <code>getLogger</code> method.</li>\n</ul>\n'}}]);