Как запустить POSTCSS ПОСЛЕ загрузки sass-loader и ExtractTextPlugin?

Я пытаюсь выяснить, как запустить postcss в моем конечном файле 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')]
    }
};

Моя текущая конфигурация хорошо работает при компиляции всех зависимых SASS и принимает это и статические CSS-импорт и извлекает их с помощью ExtractTextPlugin.

Также кажется, что я могу запускать оптимизацию POSTCSS на кусках CSS, но не в конечном продукте. Это означает, что я не могу избавиться от повторяющихся правил CSS.

Как запустить POSTCSS в файле CSS конечного состояния ПОСЛЕ того, как sass-loader и extractTextPlugin проработали свою магию?

Ответ 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').

Ответ 2

Так как ExtractTextPlugin в настоящее время не поддерживает обратный вызов onComplete или аналогичный, вы можете использовать WebpackShellPlugin.

Настройте script, который запускает требуемый плагин postcss и выполняет script в onBuildExit для обработки скомпилированного CSS.