Jak uruchomić POSTCSS AFTER sass-loader i ExtractTextPlugin?

Question

Próbuję dowiedzieć się, jak uruchomić postcss na moim ostatecznym pliku wyjściowego css.

'strict'; 

const path = require('path'); 
const webpack = require('webpack'); 
const StatsPlugin = require('stats-webpack-plugin'); 

/* POSTCSS Optimizations of CSS files */ 
const clean = require('postcss-clean'); 
const colorMin = require('postcss-colormin'); 
const discardDuplicates = require('postcss-discard-duplicates'); 
const discardEmpty = require('postcss-discard-empty'); 
const mergeRules = require('postcss-merge-rules'); 
const mergeLonghand = require('postcss-merge-longhand'); 
const minifyFonts = require('postcss-minify-font-values'); 
const orderedValues = require('postcss-ordered-values'); 
const uniqueSelectors = require('postcss-unique-selectors'); 

/* EXTRACT CSS for optimization and parallel loading */ 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: './src/index', 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].js', 
     chunkFilename: '[id].bundle.js', 
     publicPath: '/dist/', 
     soureMapFilename: '[file].map' 
    }, 
    plugins: [ 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new StatsPlugin('stats.json'), 
     new ExtractTextPlugin('assets/css/[name].css?[hash]-[chunkhash]-[contenthash]-[name]', { 
      disable: false, 
      allChunks: true 
     }) 
    ], 
    node: { 
     net: 'empty', 
     tls: 'empty', 
     dns: 'empty' 
    }, 
    module: { 
     loaders: [{ 
      test: /\.js$/, 
      loaders: ['babel'], 
      exclude: /node_modules/, 
      include: __dirname 
     }, 
     { 
      test: /\.scss$/i, 
      loader: ExtractTextPlugin.extract('style', ['css', 'postcss', 'sass']) 
     }, 
     { 
      test: /\.css$/, 
      loader: ExtractTextPlugin.extract('style', ['css']) 
     }, 
     { 
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/, 
      loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]' 
     }] 
    }, 
    postcss() { 
     return [mergeRules, mergeLonghand, colorMin, clean, discardEmpty, 
       orderedValues, minifyFonts, uniqueSelectors, discardDuplicates]; 
    }, 
    sassLoader: { 
     includePaths: [path.resolve(__dirname, './node_modules')] 
    } 
}; 

Moja obecna konfiguracja działa dobrze na kompilacji wszystkich zależnej SASS i biorąc to i statycznych importu CSS i wydobywania ich przy użyciu ExtractTextPlugin.

Wygląda na to, że mogę uruchomić optymalizacje POSTCSS na porcjach CSS, ale nie na produkcie końcowym. Oznacza to, że nie mogę pozbyć się zduplikowanych reguł CSS.

Jak uruchomić POSTCSS na pliku CSS stanu końcowego PO sass-loader i extractTextPlugin pracowały ich magii?

Answer 1

Występowały problemy z wykonaniem podobnej konfiguracji z ExtractTextPlugin, a mój problem polegał na tym, w jaki sposób korzystałem z wtyczki ExtractTextPlugin.

Ja tylko używając go do produkcji buduje i to pracował dla mnie:

module: { 
    loaders: [ 
     { // styles 
      test: /\.scss$/, 
      include: [ path.join(__dirname, 'source/styles') ], 
      loader: ExtractTextPlugin.extract('style', ['css', 'postcss', 'sass']) 
     } 
    ] 
}, 

Uwaga Array dla [ 'css', 'postcss', 'Sass']. To jest ta część, której mi brakowało. Ta tablica rozwiąże najpierw, a następnie uruchomi styl, który zostanie ostatecznie wyodrębniony przez wtyczkę.

, a na tablicy wtyczek używam new ExtractTextPlugin('styles-[chunkhash].css').

Answer 2

Ponieważ ExtractTextPlugin obecnie nie obsługuje wywołania zwrotnego "onComplete" lub podobnego, można użyć WebpackShellPlugin.

Skonfiguruj skrypt, który uruchamia wymaganą wtyczkę postcss i uruchom skrypt w onBuildExit, aby przetworzyć skompilowany plik CSS.