Question

我刚刚开始使用Webpack，当我尝试使用它时，我遇到了一个问题。我是Webpack的新手，所以如果我的问题看起来很基本，请道歉。

这是我的webpack.config.js：

var webpack = require("webpack");
var path = require("path");
var bower_dir = __dirname + "/public/js/bower_components";
var compiled_dir = __dirname + "/public/js/compiled";

module.exports = {
    entry: {
        signup: compiled_dir + "/signup"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery",
            "window.jQuery" : "jquery",
            "root.jQuery" : "jquery"
        })
    ],
    resolve: {
        alias: {
            jquery : bower_dir + "/jquery/src/jquery",
        }
    },
    output: {
        path: path.join(__dirname, "public/js/dist"),
        filename: "[name].bundle.js"
    }

};

由于我正在使用ProvidePlugin（对于jQuery插件），我在我的文件的开头没有要求（“jquery”）。但是，在执行时，我在控制台上获得此输出：

TypeError：jQuery.expr未定义 http://localhost:9000/js/dist/signup.bundle.js 6250行

你有什么线索吗？

提前致谢。

Answer 1

通过删除webpack.config.js中的“resolve”部分并使用npm安装jquery来解决此问题。但是，如果有人能解释我为什么现在有效，我将非常感激： - ）

Answer 2

根据此处提出的问题 - https://github.com/webpack/webpack/issues/1066，这似乎是早期/当前版本的JQuery的一个问题。

从上面的链接总结一下，JQuery使用的是RequireJS，它的AMD实现与实际的AMD规范不同。这可能会在以后的版本中修复。现在，尝试使用dist文件夹，它也可以正常工作。只需在此更改此行 -

alias: {
        jquery : bower_dir + "/jquery/src/jquery",
    }

到此 -

alias: {
        jquery : bower_dir + "/jquery/dist/jquery",
    }

与此同时，还有一个Webpack加载器来解决这个问题，还有一个关于如何使用它的教程，由Alexander O'Mara撰写 -

https://github.com/AlexanderOMara/amd-define-factory-patcher-loader http://alexomara.com/blog/webpack-and-jquery-include-only-the-parts-you-need/

使用webpack和jQuery时出错

2 个答案: