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

Question

期望的行为

在webpack构建中包括jQuery UI。

实际行为

运行webpack时出错：

./src/js/jquery-ui.js中的错误
找不到模块：错误：无法解决
'C：\\ Me \\ Documents \\ my_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"
    })
]

我还尝试将其添加到webpack.config.js （这样路径是相对于webpack.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 UI 下载生成器
2） 仅选择以下内容并下载文件：

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

在解压缩的文件夹中，获取jquery-ui.js文件。

注意：我只需要幻灯片效果，而不是全部jQuery UI，因此需要自定义下载。

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

我尝试使用npm install jquery并将webpack.config.js更改为：

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

并完成构建，并且前端功能正在运行。

因此，似乎它可能与用户MatheusSilva的有关webpack.ProvidePlugin jquery路径的注释有关。