Webpack file-loader ignoring PNG files

8
votes

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

3
webpackfrontendwebpack-file-loader
Tried to convert both PNG files to JPG format and output is still the same (only "slide1_background.jpg" is outputed to build folder). Therefore the problems seems not to be with extension matching regex. - cermatej
Which version of webpack you are using? How are you importing png in your application? - Jorawar Singh

3 Answers

2
votes

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.

2
votes
 {
    test: /\.(png|svg|jpg|gif|jpe?g)$/,
    use: [
      {
        options: {
          name: "[name].[ext]",
          outputPath: "images/"
        },
        loader: "file-loader"
      }
    ]
  }
0
votes

It might be a problem with loader it self you can try url-loader

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