我们的网站是使用我们的自定义“组件库”构建的。对于某些SVG图像,我们需要SVG文件的原始内容,因此我们可以做一些魔术。最好将raw-loader声明为内联这些文件的加载器:
import myIcon from 'raw-loader!./myIcon.svg';
但是,除非您使用诸如' !! '之类的装载程序前缀,否则这是行不通的。
import myIcon from '!!raw-loader!./myIcon.svg';
问题在于(显然)不赞成使用这些前缀。 webpack-4文档不再提及它们,我在这里看到了关于stackoverflow的帖子,从字面上说它们已被弃用:What does -! mean in webpack loader string?。
奇怪的是,https://github.com/webpack-contrib/raw-loader的官方github页面说您应该使用前缀。
我尝试在webpack中声明目录特定的加载器:
config.module.rules.push({
test: /\.svg$/,
loader: 'raw-loader',
include: ~location of files which require magic~,
});
config.module.rules.push({
test: /\.svg$/,
loader: 'url-loader',
include: ~rest-of-em~,
});
上述内容的六种形式。但是没有一个有效。奇怪的是,似乎webpack-config完全忽略了raw-loader。例如,在盖茨比和故事书中,...
config.module.rules.push({
test: /\.svg$/,
loader: 'raw-loader',
});
...只是使用url-loader保留,而...
config.module.rules.push({
test: /\.svg$/,
loader: 'file-loader',
});
立即切换的文件加载器。 (有什么作用??)
添加一个事实,即更改其他框架生成的webpack-config可能会很麻烦,尤其是因为我们仅在边缘情况下才需要它...
((如果您想知道为什么我要在Stackoverflow而不是https://github.com/webpack-contrib/raw-loader上问这个问题:https://gitter.im/webpack/webpack,后者将我发送到cgTag,后者将我发送到StackOverflow,所以我们到了。) )