This is a custom webpack config by using Typescript for intellisense. It doesn't seems to work at all, everything compiles but if you laod the app, it will give you a error.

package.json

{
  "name": "sample-app",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server --config config/webpack.dev.ts",
    "build:dev": "webpack --config config/webpack.dev.ts --display-error-details",
    "build:prod": "rimraf prod && webpack --config config/webpack.prod.ts"
  },
  "dependencies": {
    "@angular/animations": "8.2.9",
    "@angular/cdk": "8.2.2",
    "@angular/common": "8.2.9",
    "@angular/compiler": "8.2.9",
    "@angular/core": "8.2.9",
    "@angular/forms": "8.2.9",
    "@angular/http": "7.2.15",
    "@angular/platform-browser": "8.2.9",
    "@angular/platform-browser-dynamic": "8.2.9",
    "@angular/router": "8.2.9",
    "@angular/upgrade": "8.2.9",
    "bootstrap": "4.3.1",
    "core-js": "3.2.1",
    "jquery": "3.4.1",
    "reflect-metadata": "0.1.13",
    "rxjs": "6.5.3",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@types/copy-webpack-plugin": "^5.0.0",
    "@types/core-js": "2.5.2",
    "@types/html-webpack-plugin": "^3.2.1",
    "@types/jquery": "3.3.31",
    "@types/lodash.clonedeep": "^4.5.6",
    "@types/mapbox-gl": "^0.54.4",
    "@types/mini-css-extract-plugin": "^0.8.0",
    "@types/node": "12.7.11",
    "@types/webpack": "^4.39.2",
    "@types/webpack-dev-server": "^3.1.7",
    "@types/webpack-merge": "^4.1.5",
    "@typescript-eslint/eslint-plugin": "^2.3.3",
    "@typescript-eslint/parser": "^2.3.3",
    "angular-router-loader": "^0.8.5",
    "angular2-template-loader": "^0.6.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.0.4",
    "css-loader": "^3.2.0",
    "eslint": "^6.5.1",
    "file-loader": "^4.2.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "raw-loader": "1.0.0",
    "rimraf": "3.0.0",
    "style-loader": "^1.0.0",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^6.2.0",
    "ts-node": "^8.4.1",
    "typescript": "3.5.3",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2",
    "webpack-merge": "^4.2.2"
  },
  "license": "UNLICENSED",
}

webpack.common.ts

import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
// import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import { root } from './helpers';

const WebpackCommonConfig: webpack.Configuration = {
    entry: {
        polyfills: './app/polyfills.ts',
        // vendor: './app/vendor.ts',
        app: './app/main.ts',
    },
    module: {
        rules: [
            /**
             * --- Process the TypeScript files ---
             * **ts-loader** - TypeScript loader for webpack.
             * **angular-router-loader** - loader that enables string-based module loading 
             * with the Angular Router.
             * ***angular2-template-loader** - chain-to loader that inlines all html and styles
             * in Angular components.
             */
            {
                test: /\.tsx?$/,
                use: ['ts-loader', 'angular-router-loader', 'angular2-template-loader']
            },
            /**
             * --- Process component templates ---
             * Use **raw-loader** instead of **html-loader** as stated by official Angular Team at 
             * https://github.com/angular/angular-cli/issues/3415.
             * 
             * Also, this is recommended for the angular2-template-loader as seen on the issue below:
             * https://github.com/TheLarkInn/angular2-template-loader/issues/86.
             * 
             * Last, it maintain AOT compilation which will be used for production build.
             */
            {
                test: /\.html$/,
                use: ['html-loader']
            },
            /**
             * --- Process global stylesheet ---
             */
            {
                test: /\.css$/,
                exclude: root('app', ''),
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ],
            },
            /**
             * --- Process component stylesheets ---
             * **to-string-loader** - cast the output css style to a string for Angular components.
             * 
             * Also, the css-loader was not loading properly the url path.
             * Check this comment for the implemented fix:
             * https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/246#issuecomment-308438193
             */
            {
                test: /\.css$/,
                include: root('app', ''),
                use: ['to-string-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            url: false
                        }
                    }
                ],
            },
            /**
             * --- Process font assets ---
             * **file-loader** - resolves import/require() on a file into a url and emits the file
             * into the output directory. 
             */
            {
                test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'fonts/'
                        },
                    }
                ]
            },
            /**
             * --- Process image assets ---
             * The option name retain the full directory structure.
             */
            {
                test: /\.(png|jpg?)(\?[a-z0-9]+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]',
                        }
                    }
                ]
            },
            /**
             * --- Hide Deprecation Warnings ---
             * Mark files inside `@angular/core` as using SystemJS style dynamic imports.
             * Removing this will cause deprecation warnings to appear.
             * Source: https://github.com/angular/angular/issues/21560#issuecomment-433601967
             */
            {
                test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
                parser: { system: true },  // enable SystemJS
            }
        ]
    },
    plugins: [
        // Automatically load modules instead of having to import or require them everywhere.
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        }),
        // Fixes this warning -> Critical dependency the request of a dependency is an expression.
        // Source: https://github.com/angular/angular/issues/20357#issuecomment-354300874
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)(@angular|fesm5)/,
            root('./src')
        ),
        // Clean dist folder after each build, so that only used files will be generated.
        new CleanWebpackPlugin(),
        // Handles creation of HTML files to serve your webpack bundles.
        new HtmlWebpackPlugin({
            template: 'app/index.html'
        }),
        // Include in our dist folder files that would not be included
        // by the file-loader or url-loader such as the favicon.
        new CopyWebpackPlugin([
            { from: 'app/shared/assets/i18n/*.json', to: '' },
            { from: 'app/**/*.jpg', to: '' },
            { from: 'app/**/*.png', to: '' },
            { from: 'app/**/*.svg', to: '' },
            { from: 'app/**/*.ttf', to: '' }
        ], {})
    ],
    resolve: {
        // Tell Webpack our imports are TypeScript files too.
        extensions: ['.ts', '.js']
    },
    stats: {
        colors: true,
    }
    // optimization: {
    //     splitChunks: {
    //         // Put everything in node_modules into a file called vendors~main.js
    //         chunks: 'all',
    //     }
    // }
};

export default WebpackCommonConfig;