Webpack Config

base.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const src = path.join(__dirname, '../app')
const nodeModules = path.join(__dirname, '../node_modules')

module.exports = function () {
  return {
    entry: {
      app: './app/app.js'
    },
    output: {
      path: './build',
      filename: '[name].bundle.js',
      sourceMapFilename: '[name].map',
      publicPath: '/'
    },
    resolve: {
      extensions: ['.js', '.jsx', '.json'],
      modules: ['../app', 'node_modules']
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            'babel-loader'
          ]
        },
        {
          test: /\.html$/,
          use: [
            'file-loader?name=[name].[ext]'
          ]
        },
        {
          test: /\.svg$/,
          include: [src, nodeModules],
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'images/icons/[name].[ext]'
              }
            }
          ]
        },
        {
          test: /\.(jpe?g|png|gif|ico|jpg)(\?.*)?$/i,
          include: [src, nodeModules],
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 5120,
                name: 'images/[name].[ext]'
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './app/index.hbs',
        hash: false,
        filename: 'index.html',
        inject: 'body',
        minify: {
          collapseWhitespace: false
        }
      })
    ],
  }
}

dev.js

const webpack = require('webpack')
const webpackMerge = require('webpack-merge')
const commonConfig = require('./base.js')

module.exports = function (env) {
  return webpackMerge(commonConfig(), {
    devtool: 'eval-source-map',
    devServer: {
      port: 9000,
      compress: true,
      hot: true,
      inline: true,
      historyApiFallback: true,
      noInfo: false,
      stats: {
        assets: true,
        children: false,
        chunks: false,
        hash: false,
        modules: false,
        publicPath: false,
        timings: true,
        version: false,
        warnings: true
      },
      contentBase: './build'
    },
    module: {
      loaders: [
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                plugins() {
                  return [
                    require('autoprefixer')
                  ]
                }
              }
            },
            'sass-loader'
          ]
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins() {
                  return [
                    require('autoprefixer')
                  ]
                }
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.NamedModulesPlugin()
    ]
  })
}

prod.js

const webpack = require('webpack')
const webpackMerge = require('webpack-merge')
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const git = require('git-rev')
const commonConfig = require('./base.js')

module.exports = function (env) {
  return webpackMerge(commonConfig(), {
    output: {
      path: './dist/',
      filename: 'js/[name].[chunkhash:8].min.js',
      sourceMapFilename: 'js/[name].map',
      publicPath: '/'
    },
    module: {
      loaders: [
        {
          test: /\.s?css$/,
          use: ExtractTextPlugin.extract({
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  plugins() {
                    return [
                      require('autoprefixer')
                    ]
                  }
                }
              },
              'sass-loader'
            ]
          })
        }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        VERSION: git.short(str => str),
        PRODUCTION: JSON.stringify(process.env.NODE_ENV)
      }),
      new webpack.NamedModulesPlugin(),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'main'
      }),
      new webpack.optimize.OccurrenceOrderPlugin(true),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          unused: true,
          dead_code: true,
          warnings: false
        }
      }),
      new webpack.optimize.AggressiveMergingPlugin(),
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false
      }),
      new ExtractTextPlugin({
        filename: 'css/[name].[hash:5].css',
        allChunks: true,
        disable: false
      })
    ]
  })
}