webpack config file for stylus and postcss

webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var plugins = [new ExtractTextPlugin('bundle.css')]; // set the output destination for the bundled css file

if (process.env.NODE_ENV === 'production') { // when set the env to 'production', the 'bundle.js' file will be minified
  plugins.push(new UglifyJsPlugin({
    minimize: true,
    compress: {
      warnings: false
    }
  }));
  plugins.push(new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production')
    }
  }));
}

// stylus libs
var bubbly   = require('bubbly-grid-stylus'),
    rupture  = require('rupture');
// postcss plugins
var mqpacker = require('css-mqpacker'),
    pxToRem  = require('postcss-pxtorem'),
    cssnano  = require('cssnano'),
    rucksack = require('rucksack-css');


// CONFIG
module.exports = {
  entry: ['babel-polyfill', './js/app.jsx'],
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: [
      'node_modules',
      './js/components'
    ]
  },
  module: {
    loaders: [
      // .js / .jsx files
      {
        test: /(\.js|\.jsx$)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-2', 'react']
        },
        exclude: /node_modules/
      },
      // .styl files
      { test: /\.styl$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url!postcss-loader!stylus-loader')
      }
    ]
  },
  // stylus conf
  stylus: {
    use: [bubbly(), rupture()]
  },
  // postcss conf
  postcss: function () {
    return [
      rucksack,
      pxToRem({ //if you want to have a property ignored, use a capital in the px unit declaration.x:order-width: 1Px;
        rootValue: 16,
        unitPrecision: 5,
        propWhiteList: [],
        mediaQuery: true,
        replace: true
      }),
      mqpacker,
      cssnano({
        calc: {
          preserve: true // so your layout doesn't get messed up in IE
        },
        autoprefixer: {
          add: true,
          browsers: 'last 2 versions'
        }
      })
    ];
  },
  plugins: plugins
};