将 webpack 与 jQuery 一起使用时出错答案

【问题标题】：Error when using webpack with jQuery将 webpack 与 jQuery 一起使用时出错
【发布时间】：2015-07-03 16:30:34
【问题描述】：

我刚开始使用 Webpack，当我尝试使用 jQuery 时遇到了问题。我是 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 插件），我的文件开头没有 require("jquery")。但是，在执行时，我在控制台上得到了这个输出：

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

你有什么线索吗？

提前致谢。

【问题讨论】：

你能用 npm 安装 jquery 吗？因为 webpack 更喜欢它，所以它会容易得多。
刚试了，还是不行

标签： javascript jquery node.js webpack

【解决方案1】：

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

【讨论】：

不确定这里发生了什么，但我遇到了同样的问题。这条评论为我解决了这个问题。谢谢。

【解决方案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/

【讨论】：