使用Webpack打包后SVG图标无法显示的问题求助

问题原因 #

你遇到的问题是html-loader把HTML里<use>标签的href引用当成了模块依赖，触发file-loader处理这个SVG。但file-loader在这里的逻辑是生成一个导出文件路径的JS模块（就是那个哈希命名的.svg文件，内容是export default "images/icons.svg";），之后html-loader把这个模块的导出值替换到href里，导致最终HTML引用的是这个无效的模块文件，而非真实的SVG图标文件。

解决步骤 #

1. 安装CopyWebpackPlugin

用来把public/images下的静态SVG直接复制到打包后的dist/images目录，确保文件存在：

npm install copy-webpack-plugin --save-dev

2. 修改webpack.config.cjs配置

做两处核心调整：

• 配置CopyWebpackPlugin复制静态资源
• 修改html-loader，让它忽略带#的SVG sprite引用（不把它们当作模块处理）

修改后的完整配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); // 新增引用

module.exports = {
    entry: './frontend/src/scripts/index.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'frontend/dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.svg$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'images/',
                        publicPath: 'images/',
                    },
                },
                exclude: path.resolve(__dirname, 'frontend/public/images'), // 排除静态目录的SVG，避免重复处理
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        sources: {
                            list: [
                                '...', // 保留默认的资源处理规则
                                {
                                    tag: 'use',
                                    attribute: 'href',
                                    type: 'src',
                                    // 过滤带#的SVG sprite引用，不进行模块解析
                                    filter: (tag, attr, attrs, resourcePath) => {
                                        return !attrs.href.includes('#');
                                    }
                                }
                            ]
                        }
                    }
                },
            },
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './frontend/public/index.html',
            filename: 'index.html',
        }),
        // 新增：复制public/images到dist/images
        new CopyWebpackPlugin({
            patterns: [
                { from: './frontend/public/images', to: 'images' }
            ]
        })
    ],
};

3. 验证效果

重新执行打包命令后：

• dist/images/icons.svg会被正确复制
• 编译后的index.html里的SVG引用会保留为<use href="images/icons.svg#settings-icon">
• 哈希命名的无效SVG文件不再生成，图标可正常显示

补充说明 #

原有的file-loader规则可以保留，用来处理JS/TS代码中导入的SVG文件（比如import icon from './images/icon.svg'）；HTML里的SVG sprite引用则由CopyWebpackPlugin负责复制，html-loader不再对其进行模块解析，实现两种场景的兼容。

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