webpack.config.babel.js

'use strict';

import webpack from 'webpack';
import browserslist from 'browserslist';
import autoprefixer from 'autoprefixer';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

import cfg from './build.config';

const IS_DEVELOPMENT = process.env.NODE_ENV !== 'production';

const config = {
  context: `${__dirname}/src`,
  entry: {
    index: ['./index']
  },
  output: {
    path: `${__dirname}/dist`,
    publicPath: '/',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.scss']
  },
  devtool: IS_DEVELOPMENT ? null : 'source-map',
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      IS_DEVELOPMENT: JSON.stringify(IS_DEVELOPMENT)
    }),
    new ExtractTextPlugin('[name].css', {
      allChunks: true,
      disable: IS_DEVELOPMENT
    }),
    new HtmlWebpackPlugin ({
      inject: true,
      template: 'index.html',
      minify: IS_DEVELOPMENT ? false : {
        includeAutoGeneratedTags: true,
        collapseWhitespace: true
      }
    })
  ],
  module: {
    loaders: [{
      test: /\.scss$/,
      include: `${__dirname}/src`,
      loader: IS_DEVELOPMENT ?
        'style!css!resolve-url!sass' :
        ExtractTextPlugin.extract('css?minimize!postcss!resolve-url!sass')
    }, {
      test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
      include: [
        `${__dirname}/src/textures`
      ],
      loader: 'file-loader?name=[path][name].[ext]'
    }, {
      test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
      exclude: [
        `${__dirname}/src/textures`
      ],
      loader: 'url-loader?limit=10000&name=[path][name].[ext]'
    }, {
      test: /\.json/,
      include: [
        `${__dirname}/src/models`
      ],
      loader: 'file-loader?name=[path][name].[ext]'
    }, {
      test: /\.json/,
      include: [
        `${__dirname}/src/fonts`
      ],
      loader: 'file-loader?name=[path][name].[ext]'
    }, {
      test: /\.view.html/,
      loader: 'html-loader'
    }]
  },
  postcss: [autoprefixer({
    browsers: browserslist(null, {
      path: cfg.ext.browserslist
    })
  })],
  sassLoader: {
    data: `$is_development: ${IS_DEVELOPMENT};`
  },
  devServer: {
    watchOptions: {
      aggregateTimeout: 100
    },
    contentPath: 'dist/',
    historyApiFalback: true
  }
};

if(!IS_DEVELOPMENT) {
  config.module.loaders.push({
    test: /\.js$/,
    include: `${__dirname}/src`,
    loader: 'babel',
    query: {
      babelrc: false,
      presets: ['es2015-webpack']
    }
  });
  config.plugins.push(
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings:     false,
          'drop_console': true,
          unsafe:       true
        }
      })
  );
}

export default config;