Angular2 Webpack configs including Bootstrap 4 and Font-Awesome

app.component.ts

import { Component } from '@angular/core';

import '../css/styles.scss';

@Component({
    selector: 'iatss-app',
    templateUrl: './app.component.html'
})
export class AppComponent {
}

main.aot.ts

import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './compiledTemplates/src/app/app.module.ngfactory';

if (process.env.ENV === 'production') {
    enableProdMode();
}

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory)
    .then(success => console.log(`Bootstrap success`))
    .catch(err => console.error(err));

main.jit.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app/app.module';

if (process.env.ENV === 'production') {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
    .then(success => console.log(`Bootstrap success`))
    .catch(err => console.error(err));

pollyfill.ts

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

if (process.env.ENV === 'production') {

} else {
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

styles.scss

@import "_custom";

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";

tsconfig-aot.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "files": [
    "src/app/administration/administration.module.ts",
    "src/app/app.module.ts",
    "src/main.aot.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "src/compiledTemplates",
    "skipMetadataEmit": true,
    "entryModule": "src/app/app.module#AppModule"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../node_modules/@types/"
    ]
  },
  "files": [
    "app/administration/administration.module.ts",
    "main.jit.ts"
  ],
  "exclude": [
    "../node_modules"
  ]
}

vendor.ts

import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';

import 'bootstrap';

webpack.common.js

var webpack = require('webpack');
var helpers = require('./helpers');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        'js/polyfills': './src/polyfills.ts',
        'js/vendor': './src/vendor.ts',
        'js/app': './src/main.jit.ts'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: helpers.root('src', 'tsconfig.json')
                        }
                    },
                    { loader: 'angular-router-loader' },
                    { loader: 'angular2-template-loader' },
                    { loader: 'tslint-loader' }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    { loader: 'html-loader' }
                ]
            },
            {
                test: /\.(svg|woff|woff2|ttf|eot|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=[name].[hash].[ext]&outputPath=fonts/&publicPath=../'
            },
            {
                test: /\.scss$/,
                exclude: helpers.root('src', 'app'),
                use: ExtractTextPlugin.extract({
                    use: [
                        { loader: 'css-loader', options: { sourceMap: true } },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function ()
                                {
                                    return [
                                        require('postcss-flexbugs-fixes'),
                                        require('autoprefixer')
                                    ]
                                },
                                sourceMap: true
                            }
                        },
                        { loader: 'resolve-url-loader' },
                        { loader: 'sass-loader', options: { sourceMap: true }, }
                    ]
                })
            },
            {
                test: /\.scss$/,
                include: helpers.root('src', 'app'),
                use: [
                    { loader: 'raw-loader' },
                    { loader: 'sass-loader' }
                ]
            }
        ]
    },
    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['js/app', 'js/vendor', 'js/polyfills']
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Tether: 'Tether'
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            inject: true
        })
    ]
}

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: 'cheap-module-eval-source-map',

    output: {
        path: helpers.root('../', 'wwwroot'),
        filename: '[name].js',
        chunkFilename: 'js/[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('css/styles.css')
    ],

    devServer: {
        historyApiFallback: true,
        stats: 'minimal'
    }
});

webpack.prod.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
const ngToolsWebpack = require('@ngtools/webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const ENV = process.env.NODE_ENV = process.env.ENV = 'production';

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

    entry: {
        'js/polyfills': './src/polyfills.ts',
        'js/vendor': './src/vendor.ts',
        'js/app': './src/main.aot.ts'
    },

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

    output: {
        path: helpers.root('../', 'wwwroot'),
        filename: '[name].[chunkhash].js',
        chunkFilename: 'js/[id].[chunkhash].chunk.js'
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    { loader: '@ngtools/webpack' },
                ]
            },
            {
                test: /\.html$/,
                use: [
                    { loader: 'raw-loader' }
                ]
            },
            {
                test: /\.(svg|woff|woff2|ttf|eot|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader?name=[name].[hash].[ext]&outputPath=fonts/&publicPath=../'
            },
            {
                test: /\.scss$/,
                exclude: helpers.root('src', 'app'),
                use: ExtractTextPlugin.extract({
                    use: [
                        { loader: 'css-loader', options: { sourceMap: true } },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function () {
                                    return [
                                        require('postcss-flexbugs-fixes'),
                                        require('autoprefixer')
                                    ]
                                },
                                sourceMap: true
                            }
                        },
                        { loader: 'resolve-url-loader' },
                        { loader: 'sass-loader', options: { sourceMap: true }, }
                    ]
                })
            },
            {
                test: /\.scss$/,
                include: helpers.root('src', 'app'),
                use: [
                    { loader: 'raw-loader' },
                    { loader: 'sass-loader' }
                ]
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                use: 'raw-loader'
            }
        ]
    },
    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),
        new webpack.optimize.CommonsChunkPlugin({
            name: ['js/app', 'js/vendor', 'js/polyfills']
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Tether: 'Tether'
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            inject: true
        }),
        new ngToolsWebpack.AotPlugin({
            tsConfigPath: './tsconfig-aot.json'
        }),
        //new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
            mangle: {
                keep_fnames: true
            }
        }),
        new ExtractTextPlugin('css/sytles.[chunkhash].css'),
        new webpack.DefinePlugin({
            'process.env': {
                'ENV': JSON.stringify(ENV)
            }
        }),
        new webpack.LoaderOptionsPlugin({
            htmlLoader: {
                minimize: false // workaround for ng2
            }
        })
    ]
};