05 WebPack Config (webpack.config.js)

//"use strict";
// https://www.youtube.com/watch?v=7hf4oFU2E_8&list=PL2yYLRgebbHakhdiCZkykZQU0CQer3pvO&index=5
const path = require('path'),
    webpack = require('webpack');

// Plugins
const WebpackNotifierPlugin = require('webpack-notifier'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    CleanWebpackPlugin = require('clean-webpack-plugin');


// Folder structure
const applicationFolderName = 'ClientApp';
const applicationSource = path.join(__dirname, applicationFolderName);
const applicationDest = path.join(__dirname, 'wwwroot');
const nodeModules = path.join(__dirname, 'node_modules');

module.exports = {
    // where to look for dependencies
    entry: {
        'Vendors': path.join(applicationSource, 'Vendors.ts'),
        'Application': path.join(applicationSource, 'Startup.ts')
    },
    // where to submit bundles and compilations
    output: {
        path: applicationDest, // wwwroot
        filename: applicationFolderName + '/[name].bundle.js', // name of the file + bundle
        chunkFilename: applicationFolderName + '/Modules/[name]/[name].bundle.js', // to do several small bundles (chunks)
        publicPath: '/'
    },
    // resolve files by relative paths
    // ie. import { AppModule } from './Modules/App/App.Module' // relative path
    resolve: {
        // where to look for import/require() modules
        modules: [applicationSource, 'node_modules'], // first check in applicationSource, if not found continue to node_modules
        extension: ['.ts', '.js', '.json', '.css', '.html', '*']
    },
    //devServer: {
    //    contentBase: ".",
    //    host: "localhost",
    //    port: 9000
    //},
    plugins: [
        new webpack.optimize.UglifyJsPlugin(), // minify
        new HtmlWebpackPlugin({
            template: 'index.html.tmpl',
            excludeChunks: ['Vendors'],
            minify: {
                collapseWhitespace: true,
                collapseInlineTagWhitespace: true,
                removeRedundantAttributes: true,
                removeEmptyAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkAttributes: true
            }
        }),
        new webpack.optimize.CommonsChunkPlugin('Common'), // Creates a separate chunk for Common
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new CleanWebpackPlugin(applicationDest + '/') // clean things up befor we build
    ],
    // defines a list of loaders that tell us how to load things into our webpack modules
    module: {
        // test the file path of your dependencies
        rules: [
            { test: /\.ts$/, include: [applicationSource], loaders: ['ts-loader', 'angular-router-loader'] },
            { test: /\.html$/, include: [applicationSource], loaders: ['file-loader?publichPath=/,name=[path][name].min.[ext]', { loader: 'html-minify-loader', options: { quotes: true, dom: { lowerCaseTags: false, lowerCaseAttributeNames: false } } } ] },
            { test: /\.s?css$/, include: [applicationSource, nodeModules], loaders: ['file-loader?publichPath=,name=[path][name].min.css', 'extract-loader', 'css-loader?minimize=true', 'sass-loader'] },
            { test: /\.(woff(2)?|eot|svg|ttf)(\?v=\d+\.\d+\.\d+)?$/, include: [applicationSource, nodeModules], loaders: ['file-loader?publichPath=,name=fonts/[name].[ext]'] }
        ]
    }
};