9

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

cermatej
  • 131
  • 1
  • 1
  • 5
  • 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 Oct 16 '16 at 19:19
  • 1
    Which version of webpack you are using? How are you importing png in your application? – Jorawar Singh Oct 17 '16 at 01:11

3 Answers3

2

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.

cermatej
  • 131
  • 1
  • 1
  • 5
1

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

{ test: /\.(png|jpg|jpeg)$/, loader: 'url-loader?limit=10000' }
Jorawar Singh
  • 7,463
  • 4
  • 26
  • 39
  • Tried with url-loader but it still ignores PNG files. All permissions to image files are the same for both PNG and JPG files. Webpack doesn't throw any errors. Thanks for the reply anyway. – cermatej Oct 16 '16 at 18:36
1
 {
    test: /\.(png|svg|jpg|gif|jpe?g)$/,
    use: [
      {
        options: {
          name: "[name].[ext]",
          outputPath: "images/"
        },
        loader: "file-loader"
      }
    ]
  }
Ala'a
  • 75
  • 1
  • 4