filename - webpack mini-css-extract-plugin



Webpack extract-text-webpack-plugin et css-loader minification (2)

J'ai du mal à minimiser le fichier css généré par le plug-in extract-text-webpack

/* 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}

Dans les styles.css résultants, il y a 2 balises de corps. Il semble que les minifications soient effectuées dans un fichier (dans file1.css et dans file2.css), mais pas lorsque les deux fichiers sont combinés et extraits dans les styles.css finaux.

Comment peut-on effectuer une minification sur le style.css final? Donc, la sortie est

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

https://code.i-harness.com


Pour la minimisation CSS, vous pouvez utiliser le chargeur CSS de Webpack avec l'option "minimiser". Il a résolu le problème dans mon cas:

webpack.config.js

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

Vous pouvez utiliser optimize-css-assets-webpack-plugin , qui a été créé pour résoudre ce problème exact.

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




css-loader