Как я могу получить фактическое имя файла svg sprite (с ha sh) в JS файлах после сборки веб-пакета? - PullRequest
0 голосов
/ 05 марта 2020

Я создаю 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 - все в порядке. Почему так? Как мне поступить в этой ситуации?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...