Webpack 파일 로더가 PNG 파일을 무시합니다.

Question

webpack 파일 로더를 통해 모든 이미지 파일을 출력하려고하는데 webpack은 PNG 확장자가있는 이미지를 무시하지만. 구성은 JPG 파일에서 올바르게 작동합니다.

내 웹팩 설정 : 그것은 로더는 자체에 문제가있을 수 있습니다

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

에게 문제를 시도 할 수는 PNG 가져 오기로했다 이미지는 모두 HTML src 특성으로 가져 왔으며 JPG 이미지는 CSS의 url 특성으로 가져 왔습니다. 따라서 문제는 이미지 형식이 아닙니다.

추출 로더와 html 로더를 html 로더에 추가하여 수정. 그렇다면 Webpack은 html의 src 속성조차 정확하게 이해합니다.

HTML을 로더 설정 : 이미지를 가져 오는 방법에 대해 저를 지적

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

감사합니다.