Webpack dosya yükleyici, PNG dosyalarını görmezden geliyor

Question

Tüm görüntü dosyalarını webpack dosya yükleyici ile çıkarmaya çalışıyorum, ancak webpack PNG uzantılarıyla görüntüleri görmezden geliyor. Yapılandırma, JPG dosyalarında doğru şekilde çalışır.

Benim webpack yapılandırma: Bu yükleyici o kendini bir sorun olabilir

const path = require('path'); 

const PATHS = { 
    src: path.join(__dirname, 'src'), 
    img: path.join(__dirname, 'src/img'), 
    styles: path.join(__dirname, 'src/styles'), 
    build: path.join(__dirname, 'build') 
} 

module.exports = { 
    context: PATHS.src, 
    entry: { 
     script: ['./scripts/main.js', './styles/main.scss'], 
     index: './index.html' 
    }, 
    output: { 
     path: PATHS.build, 
     filename: '[name].js' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.scss$/, 
      loaders: ["style", "css", "sass"], 
      include: PATHS.styles 
     }, { 
      test: /\.(png|jpg)$/i, 
      loader: 'file?name=[path][name].[ext]', 
      include: PATHS.img 
     }, { 
      test: /\.(html)$/, 
      loader: 'file?name=[path][name].[ext]' 
     }] 
    } 
}; 

source folder structure

Answer 1

PNG dosyaları ile url-loader

{ test: /\.(png|jpg|jpeg)$/, loader: 'url-loader?limit=10000' } 

Answer 2

sorunu deneyebilirsiniz PNG ithal oldu görüntüler, her ikisi de html src özniteliği tarafından içe aktarılırken, JPG görüntüsü css'de url özelliği tarafından içe aktarıldı. Bu nedenle sorun görüntü formatlarında değildi.

Html yükleyicisine ek yükleyici ve html yükleyici ekleyerek giderildi. Webpack daha sonra doğru şekilde anlarsam html'deki src öznitelikleriyle eşleşir.

Html yükleyici konfigürasyonu: Görüntü alma yöntemi hakkında beni işaret için

loader: 'file-loader?name=[path][name].[ext]!extract-loader!html-loader' 

teşekkürler.