我已经搜索了互联网寻找一种使用file-loader和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]'
}
}
}
]
},
};
我想要实现的是既能像加载图片一样,将svg作为img元素加载:
<img id="logo" src="../assets/img/my.svg" alt="My Svg" />
也可以通过引入svg文件得到内容:
import mySvg from "../assets/img/my.svg";
但是我目前的配置存在一个问题,其中一个会破坏另一个。我可能做错了什么或是以错误的方式来实现这个功能。无论如何,我需要建议、帮助或任何能让这些可能性可行的东西……否则我只能选择其中一个,但这并不是我的首选。先谢谢了!
哦,还有我的临时解决方案是从配置中删除
svg-inline-loader
,然后在js中使用以下代码导入它们:
import mySvg from "-!svg-inline-loader?classPrefix!../assets/img/my.svg";
raw-loader
的 Github 文档,它的工作方式与svg-inline-loader
相同。这个工具可以正常工作,但是如果我想同时使用内联和<img src="">
,它将与file-loader
冲突。 - TheYuwana