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 download builder
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安装jquery并将webpack.config.js更改为：

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

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

因此，这似乎与用户MatheusSilva关于webpack.ProvidePlugin中jquery路径的评论有关。

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

1 个答案: