Question

Webpack当前将我的图像复制到dist文件夹中，并进行哈希处理并将其注入html中。我有一个用于svg的精灵表，我也想这样做。

问题在于文件加载器似乎无法与标签或href属性一起使用（这就是为什么我的收藏夹图标存在类似的问题）。

处理此问题的最佳方法是什么？对于Webpack来说我还很陌生，所以很抱歉，如果答案很明显，我自己也找不到它

这是我的配置文件（如果有帮助的话），

谢谢

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.html$/,
            use: ['html-loader']
        },
        {
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[hash].[ext]',
                    outputPath: 'images'
                }
            }
        },
        {
            test: /\.svg$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images'
                }
            }
        }
    ]
}

***编辑：

我现在尝试在提取模式下使用svg-sprite-loader：

config：

    {
        test: /\.svg$/,
        use: {
            loader: 'svg-sprite-loader',
            options: {
              extract: true,
              publicPath: '/static/'
            }
        }
    }

，并使用该插件作为示例文档展示

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

plugins: [
    new SpriteLoaderPlugin()
]

但仍然没有运气

Answer 1

好的，所以希望我的有限理解可能对其他人有所帮助。

我假设svg-sprite-loader会遇到html文件中的svg，就像文件加载器对图像所做的一样。但是，当然，因为svg是在href属性中链接的，所以不是。

基本上我应该将import '../assets/icons.svg';添加到我的app.js文件中

现在可以工作了，我将对整个文件进行哈希处理（除非可以一一提取，否则我认为这是我唯一的选择）

文件加载器似乎不适用于标签

1 个答案: