web-dev-qa-db-fra.com

Webpack extrait-text-webpack-plugin et minification css-loader

J'ai des problèmes pour minimiser la sortie du fichier css par l'extrait 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}

Le fichier styles.css résultant contient 2 balises body. 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 le dernier styles.css.

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

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

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

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

Pour la minification CSS, vous pouvez utiliser le chargeur CSS du webpack avec l'option "minimiser". Cela a résolu le problème dans mon cas:

webpack.config.js

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

La réponse de Paul a cessé de fonctionner avec le changement radical dans 1.0.0 Minimize et certaines autres options ont été supprimées des options.

La solution recommandée consiste à utiliser optimise-cssnano-plugin . Ce plugin fonctionne mieux avec les cartes sources que optimise-css-assets-webpack-plugin.

Exemple:

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