Webpack url-loader 重复内联图片

Question

我是 webpack 的新手，我正在使用具有以下选项的 url-loader：

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

现在，如果我在我的 index.html 中使用相同的来源写入多张图片

<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 会在每个 img 标签中内联 base64 编码的图像，这当然是错误的

那么在不允许这种重复的情况下引用 base64 编码图像的正确方法是什么？

Answer 1

这是 url-loader 的预期行为。如果您希望 Webpack 不内联您的本地图像而是发出一个单独的文件，请改用file-loader。

Webpack url-loader 重复内联图片

Webpack url-loader repeatedly inlines images

javascript

webpack

webpack-2