Webpack: Comment fusionner et moins css, puis appliquez cssnano

Question

j'ai réussi à compiler mon css et moins de ressources (« importées » de javascript) pour all-my-LESS|CSS, extraire les utiliser ExtractTextPlugin et les fusionner avec MergeFilesPlugin-combinedStyles.css.

Le bit qui me manque: Comment exécuter cssnano (par exemple via postcss?) En plus de cela comme bit final? (Oh, et même si j'ai des cartes source en ligne, je n'ai pas réussi à générer un fichier externe combinedStyles.map).

Ceci est mon combiné webpack.config.babel.js (ignorer le bit de babel, signifie simplement, vous pouvez l'écrire dans ES6, avec des déclarations d'importation colombophile):

import path from 'path'; 

const webpack = require('webpack'); //to access built-in plugins 
import ExtractTextPlugin from 'extract-text-webpack-plugin'; 
import MergeFilesPlugin from 'merge-files-webpack-plugin'; 

const extractCSS = new ExtractTextPlugin("all-my-CSS.css"); 
const extractLESS = new ExtractTextPlugin("all-my-LESS.css"); 

export default { 
    entry: [ './src/index_5.js' ], 
    output: { 
     path: path.resolve('dist') 
     filename: 'bundle.js', 
     sourceMapFilename: './bundle.js.map' 
    }, 

    module: { 
     rules: [{ 
       test: /\.css$/, 
       use: extractCSS.extract(
        [{ // This is basically "use" 
         loader: "css-loader", 
         options: { 
          minimize: false, // done later 
          sourceMap: true, 
          modules: false, // no css modules, all global styles 
         } 
        }] 
       ) 
      }, 
      { 
       test: /\.less$/, 
       use: extractLESS.extract( // This is basically "use" 
        [// No style-loader here! We want this external! 
        { 
         loader: "css-loader", // translates CSS into CommonJS 
         options: { 
          minimize: false, 
          sourceMap: true 
         } 
        }, { 
         loader: "less-loader", // compiles Less to CSS 
         options: { 
          sourceMap: true, 
         } 
        }] 
       ) 
      } 
     ] // rules 
    }, // module 

    devtool: 'inline-source-map', 
    devServer: { inline: true }, 

    plugins: [ 
     extractCSS, 
     extractLESS, 
     new MergeFilesPlugin({ 
      filename: 'combinedStyles.css', //output filename 
      test: /\.css$/, 
      deleteSourceFiles: false // for now 
     }) 
    ] 
}; 

Answer 1

J'ai ajouté postcss-loader avec css-nano, vérifier si elle aide.

Aussi je ne vois pas ici besoin d'utiliser MergeFilesPlugins (juste mon avis). ExtractTextPlugin peut être utile ici.

Il suffit d'utiliser un ExtractTextPlugin et mettre tous css ou moins fichier dans un dossier (avec Css ou .Moins poste), les chargeurs seront appliqués pour les sélective et plus tard dans les plugins utiliser juste

new ExtractTextPlugin('style.css') 

pour obtenir un fichier css commun extrait.

En utilisant cssnano:

[{ 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract(
        [{ // This is basically "use" 
         loader: "css-loader", 
         options: { 
          minimize: false, // done later 
          sourceMap: true, 
          modules: false, // no css modules, all global styles 
         } 
        }, 
        { 
         loader: 'postcss-loader', 
         options: { 
           plugins: function() { 
             return [ 
             require('cssnano')({ 
              autoprefixer: false, 
              safe: true 
              }) 
             ]; 
           } 
          } 
        }] 
       ) 
      }, 
      { 
       test: /\.less$/, 
       use: ExtractTextPlugin.extract( // This is basically "use" 
        [// No style-loader here! We want this external! 
        { 
         loader: "css-loader", // translates CSS into CommonJS 
         options: { 
          minimize: false, 
          sourceMap: true 
         } 
        }, 
        { 
         loader: 'postcss-loader', 
         options: { 
           plugins: function() { 
             return [ 
             require('cssnano')({ 
              autoprefixer: false, 
              safe: true 
              }) 
             ]; 
           } 
          } 
        }, 
        { 
         loader: "less-loader", // compiles Less to CSS 
         options: { 
          sourceMap: true, 
         } 
        }] 
       ) 
      } 
     ]