問題タブ [svg-sprite]

svg アイコンを背景画像としてレンダリングするための web-pack 4 と svg-sprite-loader の設定に問題があります。svg-sprite-loader の公式ドキュメント ( https://github.com/kisenka/svg-sprite-loader/tree/master/examples/extract-mode ) のこれらの指示に従っていました。

distフォルダーにsprite.svgファイルを作成し、それをhtml内の使用タグの参照として使用することに成功しました。ただし、次のような背景画像に src/images/icons フォルダーの svg アイコンも使用しようとしていました。

これを行うと、webpack は正しくコンパイルされますが、これが dist css ファイルに作成されます。

どんな助けでも素晴らしいでしょう。

ここに私のwebpack構成ファイルがあります:

カスタム webpack 構成を使用して、Angular 8 プロジェクトで (svg スプライトを作成するために) svg-sprite-loader パッケージを使用しようとしています。

以下のカスタム構成を使用しています：

ng build の実行中に次のエラーが発生します。

モジュール 'webpack/package.json' が見つかりません エラー: モジュール 'webpack/package.json' が見つかりません

問題がどこにあるのかを特定できません。構成またはパッケージ自体に問題があります。

OKなので、主にLaravelとVue jsを使用してWebアプリを構築しています。https://github.com/JetBrains/svg-sprite-loader#installationを使用しようとしましたが、エクスポートされた svg が空白で表示されます。

先に進む前に、そのコンテキストで、これが本当に価値があるかどうか疑問に思い始めました.tbh、わかりません.

だから私の質問は、実際の違いは何ですか?

多色の svg が必要なため、アイコン フォントを使用できないと仮定しましょう。

• パッケージを使用して svgs をスプライトにマージしてから使用する価値はありますか、それとも http/2 と実際に違いはありませんか?

• ファイル サイズとデータ使用量を考慮すると、複数の外部 svg ファイルの代わりにスプライトを使用して、この側面を最小限に抑えることは価値がありますか?

• svgs をインライン化することもオプションですが、これにより dom サイズが劇的に増加します。

だから私は疑問に思っています...誰かがこれらすべてのテクニックを試して、最高で最もパフォーマンスの高いものを見つけ出し、それらの本当の違いは何ですか.

最後に、私の svg スプライトが空白と表示される理由について誰かが私に意見をくれたら、それは大きなボーナスになるでしょう :P

上記のパッケージを webpack.mix で次のように構成しました。