Webpack url-loader repeatedly inlines images

Question

I'm new to webpack and I'm using url-loader with the following options:

{
    test: /\.(png|jp(e*)g|svg|gif)$/,  
    use: [
           {
             loader: 'url-loader',
             options: { 
                 limit: 8000 
             } 
           }
         ]
  },

Now if I write multiple images in my index.html with the same source

<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">
<img src="images/exampleimage.png" alt="">

url-loader will inline the base64 encoded image in each of these img tags, which is ofcourse wrong

What's the correct way then to reference the base64 encoded image without allowing this kind of repetitions?

Answer 1

That's the expected behavior of url-loader. If you want Webpack to not inline your local images but emit a separate file, use file-loader instead.