Webpack使用background-image引入PNG图片无法在浏览器正常显示

问题根因 #

你使用的Webpack 5版本默认内置了资源模块(Asset Modules) 能力，原生支持处理图片、字体等静态资源，不需要额外安装file-loader。当前你同时配置了file-loader处理图片，又没有关闭Webpack默认的资源模块解析逻辑，同一张foto.png被两套处理规则各执行了一次：

1. 第一次经file-loader处理输出了正常的PNG文件
2. 第二次Webpack默认的资源模块把file-loader输出的路径字符串当成资源内容二次处理，生成的文件不是标准图片格式，所以无法打开
   css中最终引用的是二次处理生成的损坏文件，所以出现加载报错。

解决方案 #

二选一即可：

方案1：使用Webpack 5原生资源模块（更推荐） #

直接删除file-loader相关配置，替换为Webpack 5内置的资源模块规则即可，修改webpack.config.js的module.rules：

module: {
    rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/,
            type: 'asset/resource',
            generator: {
                // 可自定义输出文件名格式，和之前file-loader效果一致
                filename: '[contenthash][ext]'
            }
        }
    ]
}

修改完成后可以卸载项目中的file-loader依赖：

npm uninstall file-loader

方案2：保留file-loader，关闭默认资源解析 #

如果你的项目有特殊要求必须使用file-loader，给图片处理规则新增type: 'javascript/auto'关闭Webpack默认的资源模块解析即可：

{
    test: /\.(jpe?g|png|gif|svg)$/,
    use: ['file-loader'],
    type: 'javascript/auto'
}

后续操作 #

配置修改完成后，删除整个dist目录，重新执行打包命令即可，不会再生成重复的损坏图片文件。

内容的提问来源于stack exchange，提问作者Anna R.