Webpack 文件加载器忽略 PNG 文件

Posted 2023-02-22

【中文标题】Webpack 文件加载器忽略 PNG 文件

【英文标题】：Webpack file-loader ignoring PNG files

【发布时间】：2017-02-25 14:39:11

【问题描述】：

我正在尝试通过 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

【问题讨论】：

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

你使用的是哪个版本的 webpack？你是如何在你的应用程序中导入 png 的？

【参考方案1】：

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

【参考方案2】：

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

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

Html 加载器配置：

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

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

【参考方案3】：

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

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

【讨论】：

尝试使用 url-loader 但它仍然忽略 PNG 文件。对于 PNG 和 JPG 文件，图像文件的所有权限都相同。 Webpack 不会抛出任何错误。无论如何感谢您的回复。