上記の動作をしたwebpackプラグインは存在しますか？

Question

スプライト画像で使用する画像のリストを定義し、これらの画像を一般的な方法で参照できるようにするwebpack css spritesプラグインが必要です。

I.e.プラグインは、参照画像からスプライトのイメージを構築していないと、対応するCSSの変更を行う必要があります

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

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

： - を探している私の経験に基づいて

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

postcssおよびeasyspritesプラグイン（またはその他の類似のもの、たとえばpostcss-sprites）で可能です。

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

Answer 2

短い答えはノーである私のCSSで私はこのような何かを書きます同じこと。ディレクトリ内のすべてのファイルをスプライトするWebpackプラグイン（プラグインだと思う、それはローダーかもしれない）だが、それはあなたがwebpackで本当に望むものではない。良い解決策は、 CSSソースを適切に読み込み、変更してください。

良いニュースは、これを行うローダーを書いたことです。悪いニュースはまだ公開されていないということです - 私はすぐにソースを公開することができると期待しています。