如何在webpack中包含jquery-ui文件？

Question

Desired Behaviour

Include jQuery UI in webpack build.

Actual Behaviour

Error when running webpack:

ERROR in ./src/js/jquery-ui.js
Module not found: Error: Can't resolve
'jquery' in 'C:\\Me\\Documents\\my_repo\\src\\js'

What I've Tried

I tried adding this to webpack.config.js but it didn't change anything:

plugins: [
   new UglifyJsPlugin(),
   new webpack.ProvidePlugin({
        $: "./jquery-3.3.1",
        jQuery: "./jquery-3.3.1",
        jquery: "./jquery-3.3.1"
    })
]

I also tried adding this to webpack.config.js (so that the path is relative to location of webpack.config.js ) and that caused additional errors Module not found: Error: Can't resolve '/src/js/jquery-3.3.1' :

plugins: [
   new UglifyJsPlugin(),
   new webpack.ProvidePlugin({
        $: "/src/js/jquery-3.3.1",
        jQuery: "/src/js/jquery-3.3.1",
        jquery: "/src/js/jquery-3.3.1"
    })
],

Steps To Replicate

1) Go to jQuery UI download builder
2) Select the following only and download the file:

-- Version 1.12.1
-- Effects > "Effects Core"
-- Effects > "Slide Effect"
-- Theme > "No Theme"

In the unzipped folder, get the jquery-ui.js file.

Note: I only need slide effect, not all of jQuery UI, hence the custom download.

my_entry_file.js

import './jquery-ui';

webpack.config.js

const path = require('path');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); 

var webpack = require("webpack");

module.exports = {
    entry: "./src/js/my_entry_file.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist/js")
    },
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "stage-0"]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /\.jpg$/,
                use: [
                    { loader: "url-loader" }
                ]
            },
            {
            test: path.resolve(__dirname, 'src/js/jquery-3.3.1'),
            use: [{
            loader: 'expose-loader',
            options: '$'
            }]
            }
        ]
    },
    plugins: [
       new UglifyJsPlugin(),
       new webpack.ProvidePlugin({
            $: "./jquery-3.3.1",
            jQuery: "./jquery-3.3.1"
        })
    ],
    resolve: {
    alias: {
        'uikit-util': path.resolve(__dirname, 'node_modules/uikit/src/js/util')
    }
    }
}

Answer 1

I tried installing jquery with npm install jquery and changing webpack.config.js to:

plugins: [
   new UglifyJsPlugin(),
   new webpack.ProvidePlugin({
        $: "jquery",  
        jQuery: "jquery"
    })
],

and build completes and front end functionality is working.

So it seems it might have been related to user MatheusSilva's comment regarding path to jquery in webpack.ProvidePlugin .