Configuration of webpack, babel, postcss-modules, scss

webpack.config.js

var webpack = require('webpack')
var path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var CopyWebpackPlugin = require('copy-webpack-plugin')
var SpriteLoaderPlugin = require('svg-sprite-loader/plugin')

var defines = require('./defines.config')
var config = require('./webpack.config')

// plugins

const HOST = process.env.HOST || '0.0.0.0'
const PORT = process.env.PORT || '3000'

config.devServer = {
  contentBase: './build',
    // do not print bundle build stats
  // noInfo: true,
    // enable HMR
  // hot: true,
    // embed the webpack-dev-server runtime into the bundle
  // inline: true,
    // serve index.html in place of 404 responses to allow HTML5 history
  historyApiFallback: true,
  allowedHosts: [
    'local.dev.nlze.nl:3000'
  ],
  port: PORT,
  host: HOST
}

config.plugins = [
  new webpack.NoEmitOnErrorsPlugin(),
  // new webpack.HotModuleReplacementPlugin(),
  new HtmlWebpackPlugin({
    template: './index.html',
    files: {
      css: ['main.css'],
      js: ['patch.js', 'style.js', 'bundle.js']
    }
  }),
  new CopyWebpackPlugin([
      { from: 'static', to: 'static' }
  ]),
  new SpriteLoaderPlugin(),
  new ExtractTextPlugin('[name].css'),
  new webpack.DefinePlugin(defines.development)
]

module.exports = config

webpack.loaders.js

var path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = [
  {
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components|build)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
          'react',
          'stage-0',
          ['env', {
            'modules': false,
            'targets': {
              'browsers': ['last 2 versions', 'safari >= 7']
            }
          }]
        ],
        plugins: [
          'lodash',
          ['react-css-modules', {
            filetypes: {
              '.scss': {
                'syntax': 'postcss-scss'
              }
            },
            webpackHotModuleReloading: true
          }],
          'transform-runtime',
          'transform-object-rest-spread',
          'transform-decorators-legacy',
          'transform-class-properties',
          'react-hot-loader/babel'
        ],
        cacheDirectory: true
      }
    }
  },
  {
    test: /\.ya?ml$/,
    loader: 'yml-loader'
  },
    // images from img/icons goes to icons-sprite.svg
  {
    test: /\.svg$/,
    loader: 'svg-sprite-loader',
    include: path.resolve('icons'),
    options: {
      extract: true,
      spriteFilename: 'icons-sprite.svg'
    }
  },
  {
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      context: 'src'
    }
  },
  {
    test: /\.(woff|woff2)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      context: 'src'
    }
  },
  {
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      context: 'src'
    }
  },
  {
    test: /\.(gif|jpg|png|svg)/,
    exclude: /(node_modules|bower_components|icons)/,
    loader: 'file-loader',
    options: {
      name: '[path][name].[ext]',
      context: 'src'
    }
  },
  // {
  //   test: /\.scss$/,
  //   loaders: ['stylevc-loader', 'css-loader', 'sass-loader']
  // },
  // {
  //   test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  //   exclude: /(node_modules|bower_components)/,
  //   loader: 'file-loader'
  // },
  // {
  //   test: /\.(otf|eot|svg|ttf|woff|png)/,
  //   loader: 'url-loader?limit=8192'
  // },
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader'])
  }
]