webpack.config.js

import path from 'path';
import webpack from 'webpack';

import BrowserSyncPlugin from 'browser-sync-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

import bourbon  from 'node-bourbon';

import argv from './gulp/argv';
import pkg from './package.json';
import { PATHS, FILES } from './gulp/paths';


// Base Config
// ---------------
const BASE_CONFIG = {
    debug: true,
    cache: true,

    verbose: true,
    displayErrorDetails: true,
    context: __dirname,
    stats: {
        colors: true,
        reasons: true
    },

    // Entries
    entry: {
        'app': [ FILES.APP.BOOTSTRAP ]
    },

    output: {
        path: PATHS.BUILD,
        filename: '[name].js',
        sourceMapFilename: '[name].js.map',
        chunkFilename: '[id].chunk.js'
    },

    resolve: {
        root: __dirname,
        extensions: ['','.ts','.js','.json']
    },

    module: {
        preLoaders: [
            // Lint all our TypeScript files!
            { test: /\.ts$/, loader: 'tslint' }
        ],

        loaders: [

            // Support for TypeScript
            { test: /\.ts$/, loader: 'ts' },

            // Support for HTML
            { test: /\.html$/, loader: 'html' },

            // Support for Styles (CSS/Sass)
            {   test:   /\.css$/,
                loader:  ExtractTextPlugin.extract('style', 'css?sourceMap')
            }, {
                test:   /\.s(c|a)ss$/,
                loader: ExtractTextPlugin.extract('style', `css?sourceMap!sass?sourceMap&includePaths[]=${bourbon.includePaths}`)
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'VERSION': JSON.stringify(pkg.version)
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common',
            children: true,
            minChunks: 2
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        // https://webpack.github.io/docs/list-of-plugins.html#occurenceorderplugin
        new webpack.optimize.DedupePlugin(true),
        // https://webpack.github.io/docs/stylesheets.html#separate-css-bundle
        new ExtractTextPlugin('style.css', {
            allChunks: true
            // disabling the extracttion plugins make source maps work , disable: true
        })
    ],

    // TS-Lint configuration (see tslint.json for configuration)
    tslint: {
        failOnHint: true,
        emitErrors: true
    }
};
export default BASE_CONFIG;


// Create Config (based on a mode)
// ---------------
export let getConfig = mode => {
    let config = Object.assign({}, BASE_CONFIG);

    switch(mode) {


        // DEVELOPMENT
        // ---------------
        case 'development':
            config.devtool = 'source-map';
            config.plugins.push(
                    new HtmlWebpackPlugin({
                        template: FILES.APP.INDEX,
                        inject: 'body',
                        hash: true
                    })
            );


            // Optional BrowserSync server + watch
            if( argv.watch ) {
                config.watch = true;
                config.plugins.push(
                    new BrowserSyncPlugin({
                        server: PATHS.BUILD,
                        ui: false,
                        online: false,
                        notify: false
                    })
                );
                config.devServer = {
                    contentBase: PATHS.BUILD
                };

                // Do not fail when tslint failes
                config.tslint.failOnHint = false;
                config.tslint.emitErrors = false;
            }
            break;


        // PRODUCTION
        // ---------------
        case 'production':
            console.log('...');
            break;


        // TESTING
        // ---------------
        case 'test':
            console.log('...');
            break;


        // UNKOWN
        // ---------------
        default:
            throw new Error(`[webpack] Unkown build mode "${mode}".`);
    }

    return config;
}