如何在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路徑的注釋有關。