Webpack file-loader ignoring PNG files

问题

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

回答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.

回答2:

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

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

回答3:

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

来源：https://stackoverflow.com/questions/40072381/webpack-file-loader-ignoring-png-files

标签

Webpack

frontend

webpack-file-loader