Minify css z WebPACK za ExtractTextPlugin i stylu-ładowarki

Question

W tym znacznika repo: https://github.com/pconerly/libsass-spritesmith-webpack-tracer

I ta linia: https://github.com/pconerly/libsass-spritesmith-webpack-tracer/blob/master/webpack.config.js#L82

Ja ładuje .scss i wydobywania ich w postaci zwykłego tekstu. Chciałbym też je zminimalizować - jak to zrobić? style-loader wydaje się nie mieć dla niego opcji. Czy zamiast tego powinienem używać innej wtyczki, takiej jak css-loader?

Answer 1

Sugerowałbym oglądanie postcss i postcss-loader. W ten sposób, gdy już to skonfigurujesz, możesz zrobić wiele fajnych rzeczy dla ciebie CSS/SCSS bez konieczności spędzania kilku dni na walce z pakietem internetowym.

Answer 2

Dodaje pozycję dla UglifyJsPlugin dla mnie.

plugins: [ 
    new ExtractTextPlugin("[name].css"), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { warnings: false } 
    }) 
] 

Answer 3

To nastąpi automatycznie przez program ładujący CSS, chyba że wyraźnie go wyłączyłeś. Ponieważ zadajesz pytanie, zakładam, że to znaczy, że masz. UglifyJsPlugin nie zminimalizuje CSS sam, jeśli wyodrębnisz i nie zamienisz.

Do moich potrzeb potrzebowałem wyodrębnić CSS, a następnie dostarczyć zarówno wersję zminimalizowaną, jak i nie-minifikowaną. Więc wpadłem na ten sam problem, w którym mogłem go zminimalizować lub nie minifikować, ale nie oba.

Udało mi się uruchomić to za pomocą wtyczki optimize-css-assets dla Webpacka. Umożliwi to zminimalizowanie CSS wyodrębnionego za pomocą ExtractTextPlugin i można ustawić regułę RegEx podobną do ustawień UglifyJsPlugin.

Domyślnie ta wtyczka używa do kompresji modułu css-nano, chociaż możesz zamienić go na preferowany moduł, jeśli chcesz.

Oto podstawowa konfiguracja:

plugins: [ 
    new ExtractTextPlugin('[name].css'), 
    new webpack.optimize.UglifyJsPlugin({ 
    compress: { warnings: false }, 
    include: /\.min\.js$/ 
    }), 
    new OptimizeCssAssetsPlugin({ 
    assetNameRegExp: /\.min\.css$/, 
    cssProcessorOptions: { discardComments: { removeAll: true } } 
    }) 
]