Webpack/React/Postcss/ES6 Boilerplate

.babelrc

{
  "presets": ["es2015", "react"]
}

Webpack+Postcss+ES6+React

npm i -D autoprefixer babel babel-core babel-loader babel-preset-es2015 babel-preset-react css-loader cssnano extract-text-webpack-plugin jsx-loader postcss-cssnext postcss-import postcss-loader postcss-mixins react react-dom redux react-redux rucksack-css style-loader webpack webpack-dev-server

Webpack.config.js (Dev)

require('babel-core/register');
module.exports = require('./webpack.make').default({
  isDev: true
});

Webpack.make.js

// node
import path from 'path';

// webpack
import webpack from 'webpack';

// plugins
import rucksack from 'rucksack-css';
import cssnano from 'cssnano';
import mixins from 'postcss-mixins';
import cssnext from 'postcss-cssnext';
import postcssImport from 'postcss-import';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

export default webpackConfig;

function webpackConfig(options) {
  const isBuild = !!options.build;
  const isDev = !!options.dev;
  const isDevBuild = (isBuild && isDev);
  const isTest = !!options.test;
  const exclude = /node_modules/;
  const config = {
    context: __dirname + "/app",
    entry: {
      app: "./app.jsx"
    },
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          loaders: ['babel'],
          exclude
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
        },
        {
          test: /\.(png|jpg|jpeg|gif|GIF|svg|woff|woff2|ttf|eot)$/,
          loader: 'file',
          exclude
        }
      ]
    },
    resolve: {
      alias: {}
    },
    postcss
  };
  config.plugins = createPlugins();

  function postcss(webp) {
    const cssnanoOpt = { discardUnused: false, zindex: false };
    const rucksackOpt = { autoprefixer: true };
    const devPlugins = [
      postcssImport({ addDependencyTo: webp }),
      mixins,
      rucksack(rucksackOpt),
      cssnext
    ];
    const prodPlugins = [cssnano(cssnanoOpt)];

    return isBuild ? [...devPlugins, ...prodPlugins] : devPlugins;
  }

  function createPlugins() {
    const devPlugins = [
      new ExtractTextPlugin('bundle.css'),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'common',
        filename: '[name].js'
      })
    ];
    const buildPlugins = [];

    return isBuild ? [...devPlugins, ...buildPlugins] : devPlugins;
  }

  return config;
}