sass-loaderとExtractTextPluginの終了後にPOSTCSSを実行するにはどうすればよいですか？

Question

最終出力CSSファイルでpostcssを実行する方法を理解しようとしています。

'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')] 
    } 
}; 

私の現在の構成は従属SASSのすべてをコンパイルし、その静的なCSSの輸入を取り、ExtractTextPluginを使用してそれらを抽出するに適しています。

また、私はPOSTCSS最適化をCSSのチャンクで実行できますが、最終製品では実行できないようです。つまり、私は重複CSSルールを取り除くことはできません。

最終状態のCSSファイルでPOSTCSSを実行するにはどうしたらよいですか？sass-loaderおよびextractTextPluginが魔法を働かせたらどうしますか？

Answer 1

ExtractTextPluginと同様の設定作業をする上で問題がありましたが、私の問題はExtractTextPluginプラグインをどのように使用しているかにありました。私は唯一の生産のためにそれを使用してい

が構築され、これは私のために働いていたものです：

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

注アレイ[ 'CSS'、 'postcss'、 'SASS']。それが私が欠けていた部分です。この配列は最初に解決され、プラグインによって最後に抽出されるスタイルを実行します。

そして、プラグインの配列にはnew ExtractTextPlugin('styles-[chunkhash].css')を使用しています。

Answer 2

ExtractTextPluginは現在、 "onComplete"コールバックなどをサポートしていないため、WebpackShellPluginを使用できます。

postcssプラグインを実行するスクリプトを設定し、onBuildExitでスクリプトを実行して、コンパイル済みCSSを処理します。