webpack.dev.config.js

// Run like this:
// cd client && webpack-dev-server --config webpack.development.config.js --hot --colors --progress --inline

var config       = require("./webpack.base.config");
var webpack      = require("webpack");
var path         = require("path");
var autoprefixer = require('autoprefixer');

var precss = require('precss')
var autoprefixer = require('autoprefixer');
var lost = require('lost');
var colorFunction = require('postcss-color-function');
var fontPath = require('postcss-fontpath');
var cssShort = require('postcss-short');
var colorShort = require('postcss-color-short');
var pseudoElems = require('postcss-pseudo-elements-content');
var cssMq = require('css-mqpacker')();
var cssClearfix = require('postcss-clearfix');
var postcssMixins = require('postcss-mixins');
var postcssAnimation = require('postcss-animation');

config.debug = true;
config.displayErrorDetails = true;

config.entry.main.push(
  'webpack/hot/dev-server'
);

config.output = {
  path: "../dist",
  filename: "[name]_webpack_bundle.js",
  publicPath: 'http://localhost:8080/js/'
};

config.devtool = 'cheap-inline-module-source-map';

config.module.loaders.push(
  { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel' },
  { test: /\.js?$/, exclude: /node_modules/, loader: 'babel' },
  { test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader" },
  { test: /\.css$/, loader: "style!css!postcss" },
  { test: /\.scss$/, loader: "style!css?modules&camelCase=dashes!resolve-url!sass!postcss?outputStyle=expanded&includePaths[]=" + path.resolve(__dirname, "../styles")},

  { test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png" },
  { test: /\.jpg$/, loader: "file-loader" },

  { test: /\.woff/,  loader: "url-loader?limit=10000&minetype=application/font-woff" },
  { test: /\.woff2/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
  { test: /\.ttf/,   loader: "file-loader" },
  { test: /\.eot/,   loader: "file-loader" },
  { test: /\.svg/,   loader: "file-loader" }
);

config.postcss = function () {
  return [
    precss, autoprefixer, lost,
    colorFunction, fontPath, cssShort,
    colorShort, pseudoElems, cssMq, cssClearfix,
    postcssMixins, postcssAnimation
  ];
}

config.plugins.push(
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify("development"),
      'APP_ENV': JSON.stringify("development")
    }
  })
)

module.exports = config;