Я создаю svg sprite из разных файлов svg, которые использовались в моих css и js файлах (используйте «svg-sprite-loader» в режиме извлечения):
# plugins section:
new SpriteLoaderPlugin({
plainSprite: true
}),
# rules section
{
test: /\.svg$/,
use: [{
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'img/sprite.[hash].svg'
}
}]
}
[hash]
- эта вещь добавляет содержимое ha sh к имени файла (да, не build ha sh), поэтому я получаю такие имена спрайтов: sprite.d9cb1ffbad04fdecdfb7fa6d78076c18.svg
Затем мне нужно получить доступ к некоторому значку SVG в Vue компонент:
let iconHref = `/dist/img/sprite.${%actual_build_hash%}.svg#${context.props.icon}`;
^ для этой цели я пытаюсь использовать «webpack-manifest-plugin», он создает такой манифест. json:
{
"js/0.4c0793a69922dc11d6b6.js": "/dist/js/0.4c0793a69922dc11d6b6.js",
"js/1.3520c13046fc7bd7f690.js": "/dist/js/1.3520c13046fc7bd7f690.js",
...
"js/113.459bdbb01949d6758b97.js": "/dist/js/113.459bdbb01949d6758b97.js",
"client.js": "/dist/js/client.a61c17d2df6c140fbe18.js",
"client~default.js": "/dist/js/client~default.3bcb7da46252e3ce221e.js",
"client~frontTools.js": "/dist/js/client~frontTools.b029571edd0b1b7b105f.js",
"default.js": "/dist/js/default.1725297ae6bd776d99f5.js",
"frontTools.js": "/dist/js/frontTools.a4a023f27b1c14cf07b7.js",
"vendors~client.js": "/dist/js/vendors~client.247daff2ad95058cf6f5.js",
"vendors~client~default.js": "/dist/js/vendors~client~default.863c2666bcd295e960fb.js",
"vendors~client~frontTools.js": "/dist/js/vendors~client~frontTools.c1d3fa299dbc4285e2b7.js",
"vendors~frontTools.js": "/dist/js/vendors~frontTools.c0ee5e22469215ad8364.js",
---> "img/sprite.d9cb1ffbad04fdecdfb7fa6d78076c18.svg": "/dist/img/sprite.d9cb1ffbad04fdecdfb7fa6d78076c18.svg",
"js/svgxuse.min.js": "/dist/js/svgxuse.min.js",
"js/sw.js": "/dist/js/sw.js"
}
Итак, моя идея сделать что-то вроде этого:
let iconHref = `${manifest['img/sprite.svg']}.svg#${context.props.icon}`;
Но я не могу, потому что "webpack-manifest-plugin" генерирует ha sh в ключе карты источника. Но для клиента. js, по умолчанию. js et c - все в порядке. Почему так? Как мне поступить в этой ситуации?