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

源文件夹结构

推荐答案

PNG文件的问题在于导入PNG图像，两者均由html src属性导入，而JPG图像由css中的url属性导入.因此，问题不在于图像格式.

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.

通过在HTML loader中添加extract-loader和html-loader修复.如果我正确理解，Webpack甚至可以匹配html中的src属性.

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加载程序配置:

Html loader configuration:

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

感谢您向我指出图片导入方法.

Thanks for pointing me out about the image importing method.

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