[Broken] Gulp, Webpack, Browsersync, TypeScript

index.ts

import * as gulp from 'gulp';
import * as webpack from 'webpack';

import { server } from './server';
import { bundleConfig, vendorConfig } from './webpack';

function webpackHandler(resolve) {
    return (error, stats) => {
        if(error)
            console.error('Webpack', error);

        if(stats)
            console.log(stats.toString({ colors: true }));

        resolve();
    };
}

gulp.task('build:bundle', function(resolve) {
    webpack(bundleConfig).run(webpackHandler(resolve));
});

gulp.task('build:vendor', function(resolve) {
    webpack(vendorConfig).run(webpackHandler(resolve));
});

export const start = gulp.series('build:vendor', 'build:bundle', server);

export default start;

server.ts

import * as gulp from 'gulp';
import * as path from 'path';
import * as Browser from 'browser-sync';
import * as webpack from 'webpack';
import * as webpackDevMiddleware from 'webpack-dev-middleware';
import * as webpackHotMiddleware from 'webpack-hot-middleware';

import { bundleConfig, vendorConfig } from './webpack';

const browser = Browser.create();
const bundler = webpack(bundleConfig);
const vendorBundler = webpack(vendorConfig);

bundler.plugin('done', function(stats) {
    if(stats.hasErrors() || stats.hasWarnings()) {
        return browser.emitter.emit('fullscreen:message', {
            title: 'Webpack Error',
            body: stats.toString(),
            timeout: 100000
        });
    }
});

export function server() {
    let config = {
        server: '_published',
        middleware: [
            webpackDevMiddleware(vendorBundler, {
                publicPath: vendorConfig.output.publicPath,
                stats: { colors: true }
            }),
            webpackDevMiddleware(bundler, {
                publicPath: bundleConfig.output.publicPath,
                stats: { colors: true }
            }),
            webpackHotMiddleware(bundler)
        ],
        plugins: ['bs-fullscreen-message'],
        files: [
            '_published/theme/*.css',
            '_published/*.html'
        ]
    };

    browser.init(config);

    gulp.watch('_published/source/*.js').on('change', () => browser.reload());
}

webpack.ts

import * as gulp from 'gulp';
import * as path from 'path';
import * as webpack from 'webpack';

// Plugins:
import * as ExtractTextPlugin from 'extract-text-webpack-plugin';

export const bundleConfig: webpack.Configuration = {
    mode: 'development',

    // The folder from which the tasks run.
    context: path.resolve(__dirname, '..'),

    // The entry object is where webpack looks to start building the bundle.
    entry: {
        main: [
            './source/main.ts',
            'webpack-hot-middleware/client'
        ]
    },

    // Emit sourcemaps
    devtool: 'inline-source-map',

    // The output key contains set of options instructing webpack on how and where it should output your bundles, assets and anything else you bundle or load with webpack.
    output: {
        filename: '[name].bundle.js',
        publicPath: '/source/',
        path: path.resolve(__dirname, '..', '_Published', 'source')
    },

    // Automatically resolve these extensions as default for module imports.
    resolve: {
        extensions: ['.js', '.ts']
    },

    // The plugins option is used to customize the webpack build process in a variety of ways. webpack comes with a variety built-in plugins available under webpack.[plugin-name].
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: './_published/source/vendor-manifest.json'
        }),
        // Enable hot reload during development.
        // TODO: disable during production.
        new webpack.HotModuleReplacementPlugin()
    ],

    // These options determine how the different types of modules within a project will be treated.
    module: {
        // An array of Rules which are matched to requests when modules are created. These rules can modify how the module is created. They can apply loaders to the module, or modify the parser. If multiple loaders are used, they run in reverse order.
        rules: [
            { // TypeScript transpiler for webpack.
                test: /\.ts$/,
                include: /source/,
                use: 'ts-loader'
            }
        ]
    }
};

export const vendorConfig: webpack.Configuration = {
    mode: 'development',

    // The folder from which the tasks run.
    context: path.resolve(__dirname, '..'),

    // Silence output from vendor modules.
    stats: { modules: false },
                
    // The entry object is where webpack looks to start building the bundle.
    entry: {
        vendor: [
            'event-source-polyfill',
            'reflect-metadata'
        ]
    },

    // The top-level output key contains set of options instructing webpack on how and where it should output your bundles, assets and anything else you bundle or load with webpack.
    output: { 
        path: path.join(__dirname, '..', '_published', 'source'),
        publicPath: '/source/',
        filename: '[name].bundle.js',
        library: '[name]_[hash]'
    },

    // Automatically resolve these extensions as default for module imports.
    resolve: {
        extensions: ['.js']
    },

    // The plugins option is used to customize the webpack build process in a variety of ways. webpack comes with a variety built-in plugins available under webpack.[plugin-name].
    plugins: [
        // This plugin extracts the output of the css loaders into a file. It does not support HMR and is only used in production.
        new ExtractTextPlugin('vendor.bundle.css'),
        // The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance.
        new webpack.DllPlugin({
            path: path.join(__dirname, '..', '_published', 'source', '[name]-manifest.json'),
            name: '[name]_[hash]'
        })
    ],

    // These options determine how the different types of modules within a project will be treated.
    module: {
        rules: [
            // Copy css.
            { 
                test: /\.css(\?|$)/, 
                use: [ 'style-loader', 'css-loader' ]
            },
            // The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.
            { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=10240' }
        ]
    }
};