webpack config for scss, react, can include ssr but that's another gist

package.json

{
  "name": "nm-engineering-tech-blog",
  "main": "src/server/server.js",
  "engines": {
    "node": "^8.9.1"
  },
  "scripts": {
    "start": "...",
    "dev": "rimraf ./dist && yarn build:copy && export NODE_ENV=dev && ./node_modules/.bin/nodemon --exec 'yarn server'",
    "server": "...",
    "build:copy": "mkdir -p ./dist/assets && #move anything from src into dist that doesn't need transforming",
    "build:webpack": "node -r ./util/es6_mode.js node_modules/.bin/webpack -p --config util/webpack/prod.js",
    "build": "rimraf ./dist && yarn build:copy && yarn build:webpack"
  },
}

util-es6_mode.js

// Environment-specific stuff, this module is treated as a passthrough iffe,
// no exports, just executed code
'use strict'
require('babel-register')
require("babel-polyfill")
require("module-alias/register")

util-webpack-base.js

import config from 'config'
import webpack from 'webpack'
import AssetsPlugin from 'assets-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

import helpers from '@util/helpers'

import { resolve } from 'path'
// useful to keep things portable
const __dist = resolve(process.cwd(), 'dist')
const __src = resolve(process.cwd(), 'src')

let client = config.get('client') || {}

module.exports = {
  entry: {
    styles: './src/client/styles/main.scss',
    app: './src/client/js/app.jsx',
    // code splitting for smaller bundle
    vendors: [
      'lodash',
      'react',
      'react-dom',
    ]
  },

  output: {
    //path is the filepath on disk, publicPath is what the server will expect
    path: `${__dist}/assets/`,
    publicPath: '/assets/',
    filename: '[name].[hash].bundle.js',
    chunkFilename: '[id].[hash].chunk.js'
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.scss', '.css'],
    alias: {
      '@client': `${process.cwd()}/src/client`,
    },
    modules: ['src/client', 'node_modules'],
  },
  resolveLoader: {
    modules: [`${process.cwd()}/node_modules`]
  },

  module: {
    loaders: [
      {
        test: /\.(js?x)?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react', 'stage-3'],
            plugins: ['react-hot-loader/babel']
          }
        },
        include: /src\/client/,
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
        })
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: 'raw-loader'
      },
    ]
  },

  plugins: [

    new webpack.HashedModuleIdsPlugin(),

    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendors',
        filename: '[name].[hash].js',
    }),

    new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }),

    new AssetsPlugin({
      filename: 'assets.json',
      prettyPrint: true,
    }),
  ]
}

util-webpack-dev.js

import webpackMerge from 'webpack-merge'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import commonConfig from './base'
import webpack from 'webpack'

const entry = {
  styles: [
    // For hot style updates
    'webpack-hot-middleware/client?https://localhost:3030',
    './src/client/styles/main.scss'
  ],
  app: [
    // For hot style updates
    'webpack-hot-middleware/client?https://localhost:3030',
    'react-hot-loader/patch',
    './src/client/js/app.jsx',
  ],
}

const config = webpackMerge(commonConfig, {
  entry,
  devtool: 'cheap-module-eval-source-map',
  module: {
    loaders: [
      {
          test: /\.scss$/,
          loaders: ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap']
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'url-loader'
      },
    ]
  },

  plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],

  devServer: {
    historyApiFallback: true,
    stats: 'minimal',
  }
})

module.exports = config

util-webpack-prod.js

import webpack from 'webpack'
import webpackMerge from 'webpack-merge'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import BabelMinifyPlugin from 'babel-minify-webpack-plugin'
import commonConfig from './base'

module.exports = webpackMerge(commonConfig, {
  devtool: 'eval',
  entry: {
    app: [
      './src/client/js/app.jsx',
    ]
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        include: /src\/client\/styles/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?sourceMap!sass-loader?sourceMap&outputStyle=compact'
        }),
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: 'file-loader?name=img/[name].[ext]'
      },
      {
        test: /\.(woff|woff2|ttf|eot|ico)$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      },
    ]
  },

  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    // new BabelMinifyPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: true
    }),
    new ExtractTextPlugin('[name].[hash].css'),
  ]
})