webentwicklung-frage-antwort-db.com.de

Webpack-Extraktion-Text-Webpack-Plugin und Minimierung von CSS-Loader

Ich habe Probleme beim Minimieren der CSS-Datei durch das Extrahieren-Text-Webpack-Plugin 

/* webpack.config.js */
...
loader: [{test: /\.css$/, loader: ExtractTextPlugin.extract('css?minimize')}]
...
plugins: [new ExtractTextPlugin("styles.css")]
...

/* test.js */
require('./file1.css')

/* file1.css */
@import './file2.css';
body {color: green;}
body {font-size: 1rem;}

/* file2.css */
body {border: 1px solid;}
body {background: purple;}

/* the output styles.css */
body{color:green;font-size:1rem}body{border:1px solid;background:purple}

In der resultierenden Datei styles.css befinden sich 2 Body-Tags. Es scheint, dass Minifikationen innerhalb einer Datei (in file1.css und in file2.css) durchgeführt werden, nicht jedoch, wenn die beiden Dateien kombiniert und in die endgültige styles.css extrahiert werden.

Wie kann die Minifizierung für final final.css durchgeführt werden? Die Ausgabe ist also

body{color:green;font-size:1rem;border:1px solid;background:purple}
webpackcss-loader
31
Green

Sie könnten Optimize-css-assets-webpack-plugin verwenden, um dieses Problem zu lösen.

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssAssetsPlugin()
]
48
Alexandre Kirszenberg

Zur CSS-Minifizierung können Sie den CSS-Loader des Webpacks mit der Option "Minimieren" verwenden. Es hat das Problem in meinem Fall gelöst:

webpack.config.js

...
module: {
   rules: [
      {
         test: /\.css$/,
         use: [{
            loader: "css-loader",
            options: {
               minimize: true
            }
         }
      },
   ]
},
...
2
Paul Basenko

Die Antwort von Paul hat aufgehört, mit der Änderung in 1.0.0 Minimize zu arbeiten, und einige andere Optionen wurden aus den Optionen entfernt.

Die empfohlene Lösung ist die Verwendung von Optimize-Cssnano-Plugin . Dieses Plugin funktioniert besser mit Quellkarten als mit optim-css-assets-webpack-plugin.

Beispiel:

plugins: [
    new ExtractTextPlugin("styles.css"),
    new OptimizeCssnanoPlugin({
        sourceMap: nextSourceMap,
        cssnanoOptions: {
        preset: ['default', {
            discardComments: {
            removeAll: true,
            },
        }],
        },
    }),
]
0
Black