如何在Webpack中包含jquery用户界面文件?

期望的行为

在Webpack构建中包含jquery用户界面。

实际行为

运行WebPack时出错:

/src/js/jquery-ui.js中出错
找不到模块:错误:无法解决
“c:\me\documents\my\u repo\src\js”中的“jquery”

我试过的

我试着把这个添加到 webpack.config.js 但它没有改变任何东西:

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

我也试着把这个添加到 web包.config.js (以便路径相对于 web包.config.js )这导致了更多的错误 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"
    })
],

要复制的步骤

1)转到jquery用户界面 download builder
2)选择 仅跟踪 下载文件:

--版本1.12.1
--效果>“效果核心”
--效果>“幻灯片效果”
--主题>“无主题”

在解压文件夹中,获取 jquery-ui.js 文件。

注:我只需要幻灯片效果,而不是所有的jquery用户界面,因此自定义下载。

我的输入文件.js

import './jquery-ui';

web包.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')
    }
    }
}