why does url-loader with webpack returns malformed base64?
<p>I downloaded and included the <code>url-loader</code> for Webpack:</p>
<pre class="lang-js prettyprint-override"><code>loaders: [
  {
    test: /.jsx?$/,
    include: path.join(__dirname, './public/scripts'),
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
      presets: ['es2015', 'react']
    }
  },
  {
    test: /\.css$/,
    loader: &quot;style-loader!css-loader&quot;
  },
  {
    test: /\.png$/,
    loader: &quot;url-loader?limit=10000&quot;
  },
]
</code></pre>
<p>In one of my React components I have this line of code which currently works perfectly:</p>
<pre class="lang-js prettyprint-override"><code>var style = { &quot;backgroundImage&quot;: &quot;url(images/icons/icon.png)&quot; };
</code></pre>
<p>However, these icons are small and I want them to be inlined as base64 rather than sent separately as images. I found URL loader and replaced that line with:</p>
<pre class="lang-js prettyprint-override"><code>var style = { &quot;backgroundImage&quot;: require(&quot;url?limit=10000!../images/icons/icon.png&quot;) };
</code></pre>
<p>This kind of works in that it finds the image and replaces it with base64, but it is malformed.</p>
<p>I used a base64 decoder and found that the resulting base64, when decoded, starts with <code>module.exports = </code>. This is causing it make the image show up as blank.</p>
<p>I made a temporary fix by removing first 25 or so characters of the returned base64, but it is extremely messy because of the padding with base64. It is difficult to find where the <code>module.exports = </code> ends and then to properly pad with <code>=</code>'s at the end.</p>
<p>I feel like I must be doing something wrong. If not, is there another loader I can use that just returns the image as <code>base64</code> without any of the other garbage?</p>