jQuery and Bootstrap not working with WebPack

Question

I know I am doing something wrong here but cannot work it out. I am using webPack to build a vendor.js and when I look at the vendor.js I can see jquery 3.3.1 and Bootstrap 4.1.2 are in there. But when I reference it in a page nothing works but if I swap the references over to:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

Everything works fine, am I missing something very obvious, below is my configuration:

package.json

{
  ".......", -- Removed specific details
  "main": "index.js",
  "scripts": {
    "watch": "webpack --config webpack/webpack.dev.js --watch",
    "build": "webpack --config webpack/webpack.prod.js"
  },
  "author": "",
  "dependencies": {
    "jquery":"~3.3.1",
    "bootstrap": "~4.1.2",
    "moment": "~2.22.0"
  },
  "devDependencies": {
    "@types/chrome": "~0.0.63",
    "@types/jquery": "~3.3.1",
    "@types/bootstrap": "~4.1.2",
    "inversify": "~4.13.0",
    "reflect-metadata": "~0.1.12",
    "ts-loader": "~4.2.0",
    "typescript": "~2.8.1",
    "webpack": "~4.5.0",
    "webpack-cli": "~2.0.14",
    "webpack-merge": "~4.1.2",
    "uglifyjs-webpack-plugin": "~1.2.7",
    "web-ext-types": "~2.1.0"
  }
}

webpack.common.js:

const webpack = require("webpack");
const path = require('path');

module.exports = {
    entry: {
        popup: path.join(__dirname, '../src/popup.ts'),
        options: path.join(__dirname, '../src/options.ts'),
        background: path.join(__dirname, '../src/background.ts'),
        content_script: path.join(__dirname, '../src/content_script.ts')
    },
    output: {
        path: path.join(__dirname, '../dist/js'),
        filename: '[name].js'
    },
    optimization: {
        splitChunks: {
            name: 'vendor',
            chunks: "initial"
        }
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        // exclude locale files in moment
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ]
};

webpack.dev.js:

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    mode: 'development'
});

webpack.prod.js:

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    mode: 'production'
});

I have tried both a normal and prod build with the same result, I have ensured the vendor.js is loaded. There are no errors in the console at all and I have simplified it to a very basic collapse taken straight from the getbootsrap example. I would appreciate any help, this is for a chrome extension although I am running in a sample index.html with a basic collapse and with vendor.js nothing works, not even a simple:

$(document).ready(function() {
    alert( "ready jQuery" );
    });

But all works fine if I reference the scripts externally.

I have added the produced vendor.js to:

FileDropper: http://www.filedropper.com/vendor_2 PasteBin: https://pastebin.com/hhHmcDXP