<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">Loader options publicPath doesn't seem to have any effect of for given outputs.<br>
See more info on this <a href="https://github.com/webpack-contrib/mini-css-extract-plugin/issues/222" data-hovercard-type="issue" data-hovercard-url="/webpack-contrib/mini-css-extract-plugin/issues/222/hovercard">issue</a> originally made for <code class="notranslate">mini-css-extract-plugin</code></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">publicPath given to loader options should effectively make given assets be served from their given destination - what happens instead is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
          loader: MiniCSSExtractPlugin.loader,
          options: {
            publicPath: &quot;/styles/&quot;,
	   }
         },
         &quot;css-loader?-url&quot;,
	 &quot;postcss-loader&quot;
      ]
    }
  ]
}

// The given assets do NOT end in said directory:
plugins: [
   new MiniCSSExtractPlugin({ 
     filename:      &quot;[name].[hash].css&quot;,
     chunkFileName: &quot;[id].[hash].css&quot; 
   })
]"><pre class="notranslate"><code class="notranslate">module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
          loader: MiniCSSExtractPlugin.loader,
          options: {
            publicPath: "/styles/",
	   }
         },
         "css-loader?-url",
	 "postcss-loader"
      ]
    }
  ]
}

// The given assets do NOT end in said directory:
plugins: [
   new MiniCSSExtractPlugin({ 
     filename:      "[name].[hash].css",
     chunkFileName: "[id].[hash].css" 
   })
]
</code></pre></div>
<p dir="auto">The said styles directory is ignored and all of the files are bundled with the rest of the JS bundles.</p>
<p dir="auto"><strong>Other relevant information:</strong></p>
<p dir="auto">Even the simplest configuration without <code class="notranslate">mini-css-extract-plugin</code> does not work.<br>
Tested with <code class="notranslate">html-webpack-plugin</code> and without, no difference in   ##behaviour.</p>
<p dir="auto">webpack version:  Multiple, see issue referenced<br>
Node.js version: Multiple, see issue referenced<br>
Operating System: Multiple, see issue referenced<br>
Additional tools: Multiple, see issue referenced</p>
<h3 dir="auto">Synopsis</h3>
<p dir="auto">webpack fails when pushing animated GIFs into the loader pipeline. The file content is scrambled.</p>
<p dir="auto">I tested this issue with both, <code class="notranslate">url-loader</code> and <code class="notranslate">file-loader</code>.</p>
<p dir="auto">Other file types are processed correctly.</p>
<h2 dir="auto">System Data</h2>
<ul dir="auto">
<li>Operating System: Windows 10x64</li>
<li>Node Version: v10.15.3</li>
<li>NPM Version: 6.4.1</li>
<li>webpack Version: 4.29.6</li>
<li>url-loader Version: 1.1.2</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">The following animated GIF should be rendered by the browser:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9283914/55327032-76afdb80-5489-11e9-94bc-a2e9ace4663b.gif"><img src="https://user-images.githubusercontent.com/9283914/55327032-76afdb80-5489-11e9-94bc-a2e9ace4663b.gif" alt="InlineThrobber" data-animated-image="" style="max-width: 100%;"></a></p>
<h2 dir="auto">Actual Behavior</h2>
<h3 dir="auto">With <code class="notranslate">url-loader</code></h3>
<p dir="auto">... the following, incorrect/invalid, <code class="notranslate">data:</code> URL is being created:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="url(data:image/gif;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpbWFnZXMvSW5saW5lVGhyb2JiZXIuZ2lmIjs=)"><pre class="notranslate"><code class="notranslate">url(data:image/gif;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpbWFnZXMvSW5saW5lVGhyb2JiZXIuZ2lmIjs=)
</code></pre></div>
<p dir="auto">Which in turn, when decoded, results in:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&gt; atob(&quot;bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpbWFnZXMvSW5saW5lVGhyb2JiZXIuZ2lmIjs=&quot;)

'module.exports = __webpack_public_path__ + &quot;images/InlineThrobber.gif&quot;;'"><pre class="notranslate"><span class="pl-c1">&gt;</span> <span class="pl-en">atob</span><span class="pl-kos">(</span><span class="pl-s">"bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJpbWFnZXMvSW5saW5lVGhyb2JiZXIuZ2lmIjs="</span><span class="pl-kos">)</span>

<span class="pl-s">'module.exports = __webpack_public_path__ + "images/InlineThrobber.gif";'</span></pre></div>
<h3 dir="auto">With <code class="notranslate">file-loader</code></h3>
<p dir="auto">... the following, incorrect file content is being saved to the <code class="notranslate">dist</code> folder:</p>
<div class="highlight highlight-source-batchfile notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="PS $ type .\InlineThrobber.gif
module.exports = __webpack_public_path__ + &quot;images/InlineThrobber.gif&quot;;"><pre class="notranslate">PS $ <span class="pl-k">type</span> .\InlineThrobber.gif
module.exports = __webpack_public_path__ + <span class="pl-s"><span class="pl-pds">"</span>images/InlineThrobber.gif<span class="pl-pds">"</span></span>;</pre></div>
<h2 dir="auto">Code</h2>
<h3 dir="auto">webpack.config.js</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path');

const cleanWP = require('clean-webpack-plugin').default;

module.exports = {
  entry: {
    testIncrementalSearchWC: &quot;./app/components/_mock/incremental-search/page&quot;,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/i,
        use: 'ts-loader',
        exclude: [
          /[/\\]node_modules[/\\]/,
          /[/\\].*\.js/]
      },
      {
        test: /\.scss$/i,
        use: [{
          loader: 'style-loader' // creates style nodes from JS strings
        }, {
          loader: 'css-loader' // translates CSS into CommonJS
        }, {
          loader: 'sass-loader' // compiles SASS to CSS
        }]
      },
      {
        test: /\.(png)|(svg)|(je?pg)|(gif)$/i,
        use: 'url-loader',
        issuer: {
          include: /app[/\\]components[/\\].*\.(ts)|(scss)$/
        }
      },
      {
        test: /\.(png)|(svg)|(je?pg)|(gif)$/i,
        use: {
          loader: 'file-loader',
          options: {
            outputPath: 'images',
            name: &quot;[name].[ext]&quot;
          }
        },
        issuer: {
          include: /scripts[/\\]function[/\\].*\.(ts)|(scss)$/
        }
      }
    ]
  },
  resolve: {
    extensions: [&quot;.ts&quot;, &quot;.js&quot;, &quot;.scss&quot;]
  },
  output: {
    filename: &quot;[name].bundle.js&quot;,
    path: path.join(__dirname, 'dist'),
    publicPath: &quot;/dist/&quot;
  }
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">cleanWP</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'clean-webpack-plugin'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">default</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">testIncrementalSearchWC</span>: <span class="pl-s">"./app/components/_mock/incremental-search/page"</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">rules</span>: <span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>tsx?<span class="pl-cce">$</span><span class="pl-c1">/</span>i</span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-s">'ts-loader'</span><span class="pl-kos">,</span>
        <span class="pl-c1">exclude</span>: <span class="pl-kos">[</span>
          <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span>/<span class="pl-cce">\\</span><span class="pl-kos">]</span>node_modules<span class="pl-kos">[</span>/<span class="pl-cce">\\</span><span class="pl-kos">]</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
          <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-kos">[</span>/<span class="pl-cce">\\</span><span class="pl-kos">]</span>.<span class="pl-c1">*</span><span class="pl-cce">\.</span>js<span class="pl-c1">/</span></span><span class="pl-kos">]</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>scss<span class="pl-cce">$</span><span class="pl-c1">/</span>i</span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-kos">[</span><span class="pl-kos">{</span>
          <span class="pl-c1">loader</span>: <span class="pl-s">'style-loader'</span> <span class="pl-c">// creates style nodes from JS strings</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
          <span class="pl-c1">loader</span>: <span class="pl-s">'css-loader'</span> <span class="pl-c">// translates CSS into CommonJS</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
          <span class="pl-c1">loader</span>: <span class="pl-s">'sass-loader'</span> <span class="pl-c">// compiles SASS to CSS</span>
        <span class="pl-kos">}</span><span class="pl-kos">]</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>png<span class="pl-kos">)</span><span class="pl-c1">|</span><span class="pl-kos">(</span>svg<span class="pl-kos">)</span><span class="pl-c1">|</span><span class="pl-kos">(</span>je?pg<span class="pl-kos">)</span><span class="pl-c1">|</span><span class="pl-kos">(</span>gif<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span>i</span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-s">'url-loader'</span><span class="pl-kos">,</span>
        <span class="pl-c1">issuer</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">include</span>: <span class="pl-pds"><span class="pl-c1">/</span>app<span class="pl-kos">[</span>/<span class="pl-cce">\\</span><span class="pl-kos">]</span>components<span class="pl-kos">[</span>/<span class="pl-cce">\\</span><span class="pl-kos">]</span>.<span class="pl-c1">*</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>ts<span class="pl-kos">)</span><span class="pl-c1">|</span><span class="pl-kos">(</span>scss<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>png<span class="pl-kos">)</span><span class="pl-c1">|</span><span class="pl-kos">(</span>svg<span class="pl-kos">)</span><span class="pl-c1">|</span><span class="pl-kos">(</span>je?pg<span class="pl-kos">)</span><span class="pl-c1">|</span><span class="pl-kos">(</span>gif<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span>i</span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">loader</span>: <span class="pl-s">'file-loader'</span><span class="pl-kos">,</span>
          <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
            <span class="pl-c1">outputPath</span>: <span class="pl-s">'images'</span><span class="pl-kos">,</span>
            <span class="pl-c1">name</span>: <span class="pl-s">"[name].[ext]"</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">issuer</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">include</span>: <span class="pl-pds"><span class="pl-c1">/</span>scripts<span class="pl-kos">[</span>/<span class="pl-cce">\\</span><span class="pl-kos">]</span>function<span class="pl-kos">[</span>/<span class="pl-cce">\\</span><span class="pl-kos">]</span>.<span class="pl-c1">*</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>ts<span class="pl-kos">)</span><span class="pl-c1">|</span><span class="pl-kos">(</span>scss<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">extensions</span>: <span class="pl-kos">[</span><span class="pl-s">".ts"</span><span class="pl-kos">,</span> <span class="pl-s">".js"</span><span class="pl-kos">,</span> <span class="pl-s">".scss"</span><span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">"[name].bundle.js"</span><span class="pl-kos">,</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'dist'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">publicPath</span>: <span class="pl-s">"/dist/"</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Screenshots depicting the path information:</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9283914/55327180-d312fb00-5489-11e9-9413-c7b9db70ae4b.png"><img src="https://user-images.githubusercontent.com/9283914/55327180-d312fb00-5489-11e9-9413-c7b9db70ae4b.png" alt="url-loader-1" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9283914/55327186-d4dcbe80-5489-11e9-85a0-94d576477619.png"><img src="https://user-images.githubusercontent.com/9283914/55327186-d4dcbe80-5489-11e9-85a0-94d576477619.png" alt="url-loader-2" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9283914/55327191-d6a68200-5489-11e9-8608-fcb52c3a7d9a.png"><img src="https://user-images.githubusercontent.com/9283914/55327191-d6a68200-5489-11e9-8608-fcb52c3a7d9a.png" alt="url-loader-3" style="max-width: 100%;"></a></p>
<h2 dir="auto">How Do We Reproduce?</h2>
<ol dir="auto">
<li>Recreate the depicted folder structure (presumably not required)</li>
<li>Create a SASS file, referencing an animated GIF</li>
<li>Create some TypeScript file, creating an element that's addressed by the above SASS file</li>
<li>Copy above <code class="notranslate">webpack.config.js</code> file</li>
</ol>
<br>
<hr>
/ref: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="427677014" data-permission-text="Title is private" data-url="https://github.com/webpack-contrib/url-loader/issues/178" data-hovercard-type="issue" data-hovercard-url="/webpack-contrib/url-loader/issues/178/hovercard" href="https://github.com/webpack-contrib/url-loader/issues/178">webpack-contrib/url-loader#178</a>