React项目Webpack处理SVG图标报错404问题求助

问题情况 #

• React项目中仅.png格式图片可正常加载，SVG图标无法显示
• 执行npm run dev后控制台报错：GET http://localhost:8080/[object%20Module] net::ERR_ABORTED 404 (Not Found)
• 在.scss文件中通过background-image: url('./img/actions.svg');引用SVG，文件路径确认无误
• 当前Webpack配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { outputConfig, copyPluginPatterns, entryConfig, devServer } = require("./env.config");

module.exports = (env, options) => 
{
    return {
        mode: options.mode,
        entry: entryConfig,
        devServer,
        target: "web",
        module: {
            rules: [
       
                {
                    test: /\.scss$/,
                    use: [
                        "style-loader",
                        "css-loader",
                        {
                            loader: "postcss-loader",
                            options: {
                                postcssOptions: {
                                    plugins: [
                                        ["postcss-preset-env"],
                                    ],
                                },
                            },
                        },
                        "sass-loader"
                    ],
                },
                {
                    test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
                    type: "javascript/auto",
                    loader: "file-loader",
                    options: {
                        publicPath: "../",
                        name: "[path][name].[ext]",
                        context: path.resolve(__dirname, "src/assets"),
                        emitFile: false,
                    },
                },
                {
                    test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                    type: "javascript/auto",
                    exclude: /images/,
                    loader: "file-loader",
                    options: {
                        publicPath: "../",
                        context: path.resolve(__dirname, "src/assets"),
                        name: "[path][name].[ext]",
                        emitFile: false,
                    },
                },
            ],
        }        
    };
};

问题原因 #

1. file-loader与css-loader模块格式不兼容：Webpack 5环境下，file-loader默认输出ES模块，但css-loader处理这类模块时，会把模块对象直接转为[object Module]字符串，导致浏览器请求错误路径。
2. SVG规则重复冲突：配置里存在两条针对SVG的loader规则，可能导致SVG文件被错误处理。

解决步骤 #

方案1：禁用file-loader的ES模块输出 #

在两条file-loader的配置选项中添加esModule: false，让file-loader输出CommonJS模块，确保css-loader能正确解析出文件路径：

// 图片类资源规则修改后
{
    test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
    type: "javascript/auto",
    loader: "file-loader",
    options: {
        publicPath: "../",
        name: "[path][name].[ext]",
        context: path.resolve(__dirname, "src/assets"),
        emitFile: false,
        esModule: false, // 新增这一行
    },
},
// 字体类资源规则修改后
{
    test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
    type: "javascript/auto",
    exclude: /images/,
    loader: "file-loader",
    options: {
        publicPath: "../",
        context: path.resolve(__dirname, "src/assets"),
        name: "[path][name].[ext]",
        emitFile: false,
        esModule: false, // 新增这一行
    },
},

方案2：合并重复的SVG规则（可选优化） #

通过include/exclude区分图片和字体类SVG，合并为更清晰的规则，避免重复处理：

// 处理图片类SVG及其他图片格式
{
    test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
    type: "javascript/auto",
    loader: "file-loader",
    exclude: /fonts/, // 排除字体目录下的SVG
    options: {
        publicPath: "../",
        name: "[path][name].[ext]",
        context: path.resolve(__dirname, "src/assets"),
        emitFile: false,
        esModule: false,
    },
},
// 处理字体类SVG及其他字体格式
{
    test: /\.(woff(2)?|eot|ttf|otf|svg)$/,
    type: "javascript/auto",
    include: /fonts/, // 仅处理字体目录下的SVG
    loader: "file-loader",
    options: {
        publicPath: "../",
        context: path.resolve(__dirname, "src/assets"),
        name: "[path][name].[ext]",
        emitFile: false,
        esModule: false,
    },
},

验证 #

修改配置后重启npm run dev，检查SVG图标是否正常显示，控制台是否还有404错误。

内容的提问来源于stack exchange，提问作者Mary Kalugina