gpt4 book ai didi

javascript - 你如何将 webpack file-loader 和 svg-inline-loader 用于 SVG?

转载 作者:行者123 更新时间:2023-12-05 07:17:21 25 4
gpt4 key购买 nike

我在互联网上搜索了一个使用文件加载器和 svg-inline-loader 加载 svg 的解决方案。更重要的是,我想要单独使用两者的选项,但我似乎无法正确设置 webpack.config。到目前为止,这是我的配置:

module.exports = {
entry: {
app: Path.resolve(__dirname, '../src/scripts/index.js')
},

module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
},
{
test: /\.(svg)(\?.*)?$/,
use: {
loader: 'svg-inline-loader?classPrefix',
}
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|svg|otf|webp|ttf|woff|woff2)(\?.*)?$/,
use: {
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
}
}
]
},

};

而我想要实现的是能够做到这两点:

<img id="logo" src="../assets/img/my.svg" alt="My Svg" />这很好地将 svg 加载为 img。

import mySvg from "../assets/img/my.svg";这给了我 svg 内容。

我当前配置的问题是一个破坏了另一个。我可能在做一些愚蠢的事情或以错误的方式实现,无论哪种方式,我都需要建议、帮助或任何可能使可能性发挥作用的东西……或者我必须坚持一个,这不是我的偏好。

提前致谢!

哦,我的临时而非首选解决方案是删除 svg-inline-loader从配置中导入它们到我的 js 使用:

import mySvg from "-!svg-inline-loader?classPrefix!../assets/img/my.svg";

最佳答案

你可以尝试这样的事情

 module: {
rules: [{
test: /\.(svg)(\?.*)?$/,
loader: 'raw-loader'
}]
},

关于javascript - 你如何将 webpack file-loader 和 svg-inline-loader 用于 SVG?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58816625/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com