server.js

/* eslint no-console:0 */
// Gets called when running npm start

const path = require('path')
// const url = require('url')
// const http = require('http')
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const config = require('./webpack.dev.babel')
const ip = require('ip')
const chalk = require('chalk')
const express = require('express')

const isProduction = process.env.NODE_ENV === 'production'
const port = isProduction ? process.env.PORT : 3000
const staticPath = path.resolve(__dirname, '..', 'public')
const httpProxy = require('http-proxy')

const app = express()
const proxy = httpProxy.createProxyServer()

app.use(express.static(staticPath))

if (!isProduction) {
  var devServer = new WebpackDevServer(webpack(config), { // Start a server
    publicPath: config.output.publicPath,
    hot: true
  })

  devServer.listen(8080, 'localhost', (err, result) => {
    if (err) {
      console.log(err)
    } else {
      console.log('WebpackDevServer started')
      console.log(
        chalk.bold('\nAccess URLs:') +
        chalk.gray('\n-----------------------------------') +
        '\n   Local: ' + chalk.magenta(`http://localhost:8080`) +
        '\nExternal: ' + chalk.magenta(`http://${ip.address()}:8080`) +
        chalk.gray('\n-----------------------------------')
      )
    }
  })

  app.all('/build/*', (req, res) => {
    proxy.web(req, res, {
      target: 'http://localhost:8080'
    })
  })
}

proxy.on('error', function (e) {
  console.log('Could not connect to proxy, please try again...')
})

app.get('*', (req, res, next) => {
  res.sendFile('index.html', {
    root: staticPath
  })
})

app.listen(port, (err) => {
  if (err) {
    console.log(err)
  } else {
    console.log('Server started')
    console.log(
      chalk.bold('\nAccess URLs:') +
      chalk.gray('\n-----------------------------------') +
      '\n   Local: ' + chalk.magenta(`http://localhost:${port}`) +
      '\nExternal: ' + chalk.magenta(`http://${ip.address()}:${port}`) +
      chalk.gray('\n-----------------------------------')
    )
    console.log(chalk.blue('\nPress ' + chalk.italic('CTRL-C') + ' to stop'))
  }
})

webpack.base.babel.js

/**
 * COMMON WEBPACK CONFIGURATION
 */

const path = require('path')
const webpack = require('webpack')

module.exports = (options) => {
  return {
    entry: options.entry,
    output: { // Compile into js/build.js
      path: path.resolve(__dirname, '..', 'public', 'build'),
      filename: '[name].js',
      chunkFilename: '[name].chunk.js',
      publicPath: '/build/'
    },
    module: {
      loaders: [{
        test: /\.js$/, // Transform all .js files required somewhere with Babel
        loader: 'babel',
        exclude: path.join(__dirname, '..', '/node_modules/'),
        query: options.babelQuery
      }, {
        test: /\.css$/, // Transform all .css files required somewhere with PostCSS
        loader: options.cssLoaders
      }, {
        test: /\.jpe?g$|\.gif$|\.png$/i,
        loader: 'url-loader?limit=10000'
      }, {
        test: /\.html$/,
        loader: 'html-loader'
      }
      ]
    },
    plugins: options.plugins.concat([
      new webpack.optimize.CommonsChunkPlugin('common.js')
    ]),
    postcss: function () {
      return [
        require('postcss-import')({
          glob: true,
          onImport: function (files) {
            console.log(this)
            files.forEach(this.addDependency)
          }.bind(this)
        }),
        require('postcss-custom-media'),
        require('postcss-custom-properties'),
        require('postcss-calc'),
        require('postcss-color-function'),
        require('postcss-discard-comments'),

        require('postcss-focus')(), // ...add a :focus to ever :hover...
        require('autoprefixer')({ // ...and add vendor prefixes...
          browsers: ['last 2 versions', 'IE > 8'] // ...supporting the last 2 major browser versions and IE 8 and up...
        }),
        require('postcss-reporter')({ // Posts messages from plugins to the terminal
          clearMessages: true
        })
      ]
    },
    resolve: {
      modulesDirectories: [
        'assets',
        'containers',
        'components',
        'node_modules'
      ],
      extensions: [
        '',
        '.js',
        '.jsx',
        '.react.js'
      ]
    },
    target: 'web', // Make web variables accessible to webpack, e.g. window
    stats: false, // Don't show stats in the console
    progress: true
  }
}