Webpack file-loader ignoring PNG files

Question

I'm trying to output all image files through webpack file loader, webpack is ignoring images with PNG extensions however. Configuration works correctly on JPG files.

My 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

The problem with the PNG files was with importing PNG images, both were imported by html src attribute, while JPG image was imported by url attribute in css. Therefore the problem was not in the image formats.

Fixed by adding extract-loader and html-loader to html loader. Webpack then matches even src attributes in html if i understand it correctly.

Html loader configuration:

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

Thanks for pointing me out about the image importing method.