Webpack 文件加载器忽略 PNG 文件

Question

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

我的 webpack 配置:

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

Answer 1

PNG 文件的问题在于导入 PNG 图片，两者都是通过 html src 属性导入的，而 JPG 图片是通过 css 中的 url 属性导入的。因此，问题不在于图像格式。

通过将 extract-loader 和 html-loader 添加到 html loader 来修复。如果我理解正确，Webpack 甚至会匹配 html 中的 src 属性。

Html 加载器配置:

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

感谢您向我指出图像导入方法。