Ist ein Webpack-Plugin mit beschriebenem Verhalten vorhanden?

Question

Ich möchte das webpack css sprites plugin finden, mit dem ich eine Liste von Bildern definieren kann, die ich im Sprites-Bild verwenden möchte, und diese Bilder auf eine gebräuchliche Weise referenzieren.

I.e. in meinem css werde ich so etwas schreiben:

some-selector-a { 
    ... 
    background-image: url('images/home.png'); 
    ... 
} 

some-selector-b { 
    ... 
    background-image: url('images/mail.png'); 
    ... 
} 

Plugin Sprites Bild von referenzierten Bilder aufbauen und durchführen CSS Änderungen entsprechen:

some-selector-a { 
    ... 
    background-image: url('sprites.png'); 
    background-position: -16px 0px; 
    background-repeat: no-repeat; 
    ...  
} 

some-selector-b { 
    ... 
    background-image: url('sprites.png'); 
    background-position: -32px 0px; 
    background-repeat: no-repeat; 
    ...  
} 

Answer 1

Es ist möglich mit postcss und easysprites Plugins (oder jede andere ähnliche z. B. postcss-sprites).

Sie müssen sich für CSS-Dateien (docs) und enable plugin in postcss Abschnitt postcss-loader in Ihrem webpack Config hinzuzufügen:

var easysprite = require('easysprite'); 
... 
postcss: function() { 
    return [easysprite]; 
} 

Answer 2

Kurze Antwort ist nein - auf Grund meiner Erfahrung suchen das gleiche. Es gibt ein Webpack-Plugin (ich glaube, es ist ein Plugin, es könnte ein Ladeprogramm gewesen sein), das alle Dateien in einem Verzeichnis versieht, aber das ist nicht das, was Sie wollen mit webpack - eine gute Lösung wird automatisch Ihre Bildreferenzen neu geladen, und ändern Sie Ihre CSS-Quelle entsprechend.

Gute Nachrichten ist, schrieb ich einen Lader, der dies tut. Schlechte Nachrichten sind, dass es noch nicht öffentlich ist - hoffend, dass ich es bald öffnen kann.