Unable to build jQuery ui with webpack

I'm unable to successfully include jQuery UI in my project using webpack. jQuery has been working, but when I visit a page of my app that requires jQuery-UI I get the following warning:

jQuery.Deferred exception: $(...).draggable is not a function TypeError: $(...).draggable is not a function

And error:

jquery.js:4055 Uncaught TypeError: $(...).draggable is not a function

I'm nearly brand new to building javascript code using webpack/node, so it's very possible I've made a naive mistake.

This is my config file:

config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');


module.exports = {
    entry: './src/js/index.js',
    mode: 'development',
    output: {
        filename: 'index.js',
        path: 'path/js',
    },
    module: {
        rules: [
            {
                test: /\.(scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                enforce: 'pre',
                use: ['source-map-loader'],
              },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '../css/index.css',
        }),
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
        })
    ],
    resolve : {
        alias: {
            // bind version of jquery-ui
            "jquery-ui": "jquery-ui/jquery-ui.js",
            // bind to modules;
            modules: path.join(__dirname, "node_modules"),
        }
    },
}

My entrypoint:

index.js

import '../sass/index.scss';
const $ = require("jquery");
require('webpack-jquery-ui');
require('webpack-jquery-ui/draggable');
global.$ = global.jQuery = $;
import 'bootstrap';

Each time I make a change I run the command:

npx webpack --config config.js

There are no errors output from this.

Where am I going wrong?

Update Upon Chris G suggestion in comments I've tried the following:

import '../sass/index.scss';
const $ = require('webpack-jquery-ui');
global.$ = global.jQuery = $;
import 'bootstrap';

Upon rebuilding I get a series of errors in the console such as:

ERROR in (webpack)-jquery-ui/index.js
Module not found: Error: Can't resolve 'jquery- 
ui/themes/base/autocomplete.css' in 
'.../webpack/node_modules/webpack-jquery-ui'
@ (webpack)-jquery-ui/index.js 57:0-49
@ ./src/js/index.js

This is what's returned when running "npm install --save jquery jquery-ui"

npm WARN saveError ENOENT: no such file or directory, open '.../webpack/package.json' npm WARN enoent ENOENT: no such file or directory, open '.../webpack/package.json' npm WARN webpack No description npm WARN webpack No repository field. npm WARN webpack No README data npm WARN webpack No license field.

Could this now be an install problem?