webpack处理css内svg相对路径生成无效导出文件问题咨询

• Webpack 5 版本默认内置了Asset资源处理模块，你当前配置中仍在使用旧版file-loader，且没有添加type: 'javascript/auto'禁用Webpack默认的资源处理逻辑，导致svg文件被两次处理：一次是file-loader输出正常的静态svg文件，另一次是内置Asset模块将其编译为仅包含导出路径的JS模块，强制以svg后缀输出，就是你看到的无效文件。
• 你配置的svg匹配规则仅支持带版本号后缀的svg文件，你CSS中引用的无版本号的svg没有命中该规则，进一步加剧了资源解析异常。

你遇到的异常文件示例：

异常文件内容示例：

方案一：继续使用file-loader #

修改字体/svg处理规则，添加禁用默认Asset处理的配置：

// 找到对应字体处理的rule，修改为如下内容
{
    test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    type: 'javascript/auto', // 新增该行，禁用Webpack5默认资源处理
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                publicPath: './fonts/',
                outputPath: './fonts/',
                esModule: false
            }
        }
    ]
}

同时建议删除entry配置中的单独style.css入口，改为在src/index.js中引入样式文件import './styles/style.css'，避免生成多余的style.min.js空入口文件。

方案二：改用Webpack5内置Asset模块（更推荐） #

Webpack5的内置Asset模块已经完全可以替代file-loader的功能，无需额外安装依赖，直接替换原有配置即可：

1. 先删除原来的字体、图片两个file-loader规则
2. 新增如下两条资源处理规则

{
    test: /\.(woff(2)?|ttf|eot|svg)$/i,
    type: 'asset/resource',
    generator: {
        filename: 'fonts/[name][ext]'
    }
},
{
    test: /\.(png|jpg|jpeg|gif)$/i,
    type: 'asset/resource',
    generator: {
        filename: 'images/[name][ext]'
    }
}

3. 调整CSS处理规则，适配样式文件中资源路径的解析：

{
    test: /\.css$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../' // 可根据实际部署的路径层级调整
            }
        }, 
        'css-loader'
    ]
}

修改后重新编译即可，不会再生成无效的svg导出文件，CSS中的路径也会自动解析为正确的静态资源路径。

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