webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractHtml = require('html-webpack-plugin');
const ExtractText = require('extract-text-webpack-plugin');

const extractCss= new ExtractText({ filename: 'styles/vendors.css' });
const extractStylus = new ExtractText({ filename: 'styles/app.css' });

module.exports = (env) => {
  return {
    devtool: "source-map",
    entry: {
      main: path.resolve(__dirname, 'src', 'js', 'index.js'),
      vendor: ['jquery', 'flexboxgrid', 'normalize.css']
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'js/[name].[hash].js',
    },
    module: {
      rules: [
        { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
        {
          test: /\.css/,
          use: extractCss.extract([
          {
            loader: 'css-loader',
             options: {
              modules: false,
              sourceMap: true
            }
          },
        ]) },
        {
          test: /\.styl/,
          exclude: /node_modules/,
          use: extractStylus.extract([
            // 'postcss-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[name]_[local]_[hash:base64:5]',
                sourceMap: true
              }
            },
            {
              loader: 'stylus-loader',
              options: {
                modules: true,
                localIdentName: '[name]_[local]_[hash:base64:5]',
                sourceMap: true
              }
            },
        ])},
        {
          test: /\.(png|jpg)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'file-loader',
              options: {
                useRelativePath: true,
                name: '[name].[ext]',
                outputPath: '/images/',
              }
            }
          ]

          },
        // { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, use: 'file-loader?outputPath=fonts/&publicPath=/&name=[name].[ext]'},
      ]
    },
    resolve: {
      extensions: [ '.js', '.json',  '.styl'],
      modules: ['node_modules'],
    },
    plugins: [
      extractStylus,
      extractCss,
      new ExtractHtml({
        template: path.resolve(__dirname, 'src', 'index.html'),
        inject: 'body'
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
      }),
    ]
  }
}