वेबपैक फ़ाइल-लोडर पीएनजी फाइलों को अनदेखा कर रहा है

Question

मैं वेबपैक फ़ाइल लोडर के माध्यम से सभी छवि फ़ाइलों को आउटपुट करने का प्रयास कर रहा हूं, वेबपैक पीएनजी एक्सटेंशन के साथ छवियों को अनदेखा कर रहा है। कॉन्फ़िगरेशन जेपीजी फ़ाइलों पर सही ढंग से काम करता है।

मेरे webpack config:

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 फ़ाइलें के साथ url-loader

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

Answer 2

कोशिश कर सकते हैं समस्या पीएनजी आयात करने के साथ था छवियों, दोनों को HTML स्रोत विशेषता द्वारा आयात किया गया था, जबकि जेपीजी छवि सीएसएस में यूआरएल विशेषता द्वारा आयात की गई थी। इसलिए समस्या छवि प्रारूपों में नहीं थी।

एचटीएमएल लोडर में निकालने-लोडर और एचटीएमएल लोडर जोड़कर फिक्स्ड। वेबपैक तब HTML में भी src विशेषताओं से मेल खाता है अगर मैं इसे सही ढंग से समझता हूं।

एचटीएमएल लोडर विन्यास:

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

मुझे छवि आयात विधि के बारे में उनका कहना है के लिए धन्यवाद।