Getting jQuery and Bootstrap 4 JS working with Webpack and Middleman

Trying to get jQuery loaded up on my Webpack Config using Middleman.

I'm trying to use:

• Middleman 4.2.1
• Bootstrap 4 Beta
• jQuery 3

I have Bootstrap's CSS loading but now having problems trying to load jQuery along with Bootstrap's JS components.

Unsure if I'm doing things correctly with the ProviderPlugin

I've saved all the dependencies using --save-dev option.

// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: [
    './source/assets/javascripts/all.js'
  ],

  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] },
    ]
  },

  output: {
    path: __dirname + './tmp/dist',
    filename: 'assets/javascripts/[name].bundle.js'
  },

  plugins: [
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),

    new ExtractTextPlugin('assets/stylesheets/[name].bundle.css'),

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'],
      // In case you imported plugins individually, you must also require them here:
      Util: "exports-loader?Util!bootstrap/js/dist/util",
      Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
      Alert: "exports-loader?Dropdown!bootstrap/js/dist/alert",
      Carousel: "exports-loader?Dropdown!bootstrap/js/dist/carousel",
      Collapse: "exports-loader?Dropdown!bootstrap/js/dist/collapse",
      Modal: "exports-loader?Dropdown!bootstrap/js/dist/modal",
      Popover: "exports-loader?Dropdown!bootstrap/js/dist/popover",
      Scrollspy: "exports-loader?Dropdown!bootstrap/js/dist/scrollspy",
      Tab: "exports-loader?Dropdown!bootstrap/js/dist/tab",
      Tooltip: "exports-loader?Dropdown!bootstrap/js/dist/tooltip",
    }),
  ]
};

My index.js:

// This is where it all goes :)
console.log("Hello world");

The console log outputs on the browser.

My site.css.scss file which is currently loading Bootstrap's styles:

@import "custom";
@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
@import "index";

Do I need to require or import jQuery elsewhere and not just in the webpack config?

Any feedback is much appreciated.

Thanks :)