Webpack 文件加载器忽略 PNG 文件 [英] Webpack file-loader ignoring PNG files

问题描述

我正在尝试通过 webpack 文件加载器输出所有图像文件，但是 webpack 忽略了带有 PNG 扩展名的图像.配置在 JPG 文件上正常工作.

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.

我的 webpack 配置:

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]'
        }]
    }
};

源文件夹结构

推荐答案

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

这篇关于Webpack 文件加载器忽略 PNG 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！