Webpack的file-loader忽略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

- cermatej

---

尝试将两个PNG文件转换为JPG格式，但输出仍然相同（只有“slide1_background.jpg”被输出到构建文件夹）。因此，问题似乎不在于扩展名匹配正则表达式。 - cermatej

你正在使用哪个版本的Webpack？在你的应用程序中，你是如何导入PNG文件的？ - Jorawar Singh

Answer 1

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

通过将extract-loader和html-loader添加到html loader中来解决问题。如果我理解正确的话，Webpack甚至可以匹配html中的src属性。

Html loader配置：

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

感谢您提醒我有关图像导入方法的事项。

- cermatej

Answer 2

可能是加载器本身的问题，您可以尝试使用url-loader

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

- Jorawar Singh

---

尝试了使用url-loader，但它仍然无视PNG文件。对于PNG和JPG文件，图像文件的所有权限都是相同的。Webpack没有抛出任何错误。不管怎样，谢谢你的回复。 - cermatej

Answer 3

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

- Ala'a