setup webpack

webpack-npm-install.sh

npm install --save webpack webpack-dev-server  babel-loader css-loader file-loader postcss-loader style-loader url-loader standard-loader  extract-text-webpack-plugin clean-webpack-plugin copy-webpack-plugin html-webpack-plugin precss node-sass autoprefixer normalize.css

webpack.config.js

const path = require('path')

const autoprefixer = require('autoprefixer')
const precss = require('precss')
const webpack = require('webpack')
const CleanPlugin = require('clean-webpack-plugin')
const ExtractPlugin = require('extract-text-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

const production = process.env.NODE_ENV === 'production'
const local = process.env.NODE_ENV === 'local'

// http://webpack.github.io/docs/list-of-plugins.html
const plugins = [
  // remove build dir before compile time
  new CleanPlugin('build'),

  // extract path is relative to publicPath `build`
  new ExtractPlugin('css/app.css'),

  // copy over cache manifest
  new CopyWebpackPlugin([
    { from: 'node_modules/normalize.css/normalize.css', to: 'css' }
  ]),

  // optimize chunk occurences
  new webpack.optimize.OccurenceOrderPlugin(),

  // define env vars
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
      BABEL_ENV: JSON.stringify(process.env.NODE_ENV),
      REACT_ENV: JSON.stringify(process.env.NODE_ENV)
    }
  }),

  // interpolate index.ejs, copy to dist
  new HtmlWebpackPlugin({
    title: '<Title>',
    template: 'client/index.ejs',
    inject: 'body',
    filename: 'index.html'
  })
]

// plugins for development builds only
const devPlugins = [
  new webpack.NoErrorsPlugin()
]

// plugins for production builds only
const prodPlugins = [
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 51200 }), // ~50kb
  new webpack.optimize.UglifyJsPlugin({
    mangle: true,
    compress: {
      // Suppress uglification warnings
      warnings: false
    }
  })
]

module.exports = {
  // options for webpack-dev-server
  devServer: {
    contentBase: 'build/client',
    historyApiFallback: true,
    outputPath: path.join(__dirname, 'build/client')
  },

  // inline-source-map makes devtools point to source files
  devtool: local ? 'inline-source-map' : false,

  entry: './src/client/index.js',

  module: {
    // handle linting before compile step, fail faster
    preLoaders: [
      { test: /\.css$/, loader: 'standard' }
    ],

    // set module loaders
    loaders: [
      // import es6 and convert to commonJS, also transpile React components
      // see .babelrc for config
      {
        exclude: /node_modules/,
        loader: 'babel',
        test: /\.js$/
      },

      // convert css and prefix, pass to styles loader to inject in page
      {
        // extract styles to file
        loader: ExtractPlugin.extract('style', 'css!postcss'),
        test: /\.css$/
      },

      // import images as compressed data URIs
      {
        loader: 'url!image-webpack',
        test: /\.(png|jpg|svg)$/
      },

      // support json
      {
        exclude: /node_modules/,
        loader: 'json',
        test: /\.json$/
      }
    ]
  },

  // where to output, also naming conventions
  output: {
    filename: 'app.js',
    chunkFilename: '[name].js',
    path: 'build/client'
  },

  // load plugins
  plugins: production ? plugins.concat(prodPlugins) : plugins.concat(devPlugins),

  // postcss loader plugins
  postcss() {
    return [autoprefixer, precss]
  }
}