webpack-dev-server configuration

helper.js

var path = require('path');
var _root = path.resolve(__dirname, '..');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var environmentUrls = require("./includes/environmentUrls.json");
var cssincludes = require("./includes/cssincludes.json");
var jsincludes = require("./includes/jsincludes.json");

function root(args) {
    args = Array.prototype.slice.call(arguments, 0);
    return path.join.apply(path, [_root].concat(args));
}


function webpackHtmlCreatorProd(environment) {
    return new HtmlWebpackPlugin({
        filename:"../../Content/TransactionDrilldown/" +( environment ? "index-" + environment + ".html" : "index.html"),
        template: "./src/index.ejs",
        environmentUrl: environmentUrls[environment],
        environment:environment,
        cssincludes: cssincludes,
        jsincludes: jsincludes
    });
};

function webpackHtmlCreatorDev(environment) {
    return new HtmlWebpackPlugin({
        filename:environment ? "index-" + environment + ".html" : "index.html",
        template: "./src/index.ejs",
        environmentUrl: environmentUrls[environment],
        environment:environment,
        cssincludes: cssincludes,
        jsincludes: jsincludes
    });
};
exports.root = root;
exports.webpackHtmlCreatorDev = webpackHtmlCreatorDev;
exports.webpackHtmlCreatorProd = webpackHtmlCreatorProd;

webpack.common.js

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

module.exports = {
    entry: {
        polyfills: './src/polyfills.ts',
        vendor: './src/vendor.ts',
        app: './src/main.ts',
        images: './src/images.ts'
    },

    resolve: {
        extensions: ['', '.js', '.ts', '.scss', '.css']
    },
    externals: {
        "angular": "angular"
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts'
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: "file-loader?name=[name].[ext]",

            },
            {
                test: /\.css$/,
                loaders: ['to-string-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                include: [/node_modules/],
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader')
            }, {
                test: /\.scss$/,
                exclude: [/node_modules/],
                loaders: ['raw-loader', 'sass-loader']
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        })

    ]
};

webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

module.exports = webpackMerge(commonConfig, {
    devtool: 'source-map',

    output: {
        path: helpers.root('dist'),
        publicPath: '',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },
    plugins: [
        new ExtractTextPlugin('[name].css') ,
        helpers.webpackHtmlCreatorDev(""),
        helpers.webpackHtmlCreatorDev("local"),
        helpers.webpackHtmlCreatorDev("dev"),
        helpers.webpackHtmlCreatorDev("int"),
        helpers.webpackHtmlCreatorDev("modoff"),
        helpers.webpackHtmlCreatorDev("prod")
    ],
   sassLoader: {
        data: "$relativeUrl: '';"
    },
    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});