Javascript 网页包要求（jquery）赢得'；行不通

我刚开始使用webpack，正在尝试同步加载jquery

这是我的main.js

var $ = require('jquery');

require('javascript/index.js');
require('less/index.less');

这是我的webpack.config

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');

module.exports = {
    entry: './assets/javascript/main.js',
    output: {
        path: './assets',
        filename: '/javascript/bundle.js'
    },
    module : {
        loaders : [
            {
                test: /\.css/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("/css/[name].css")
    ],
    resolve : {
        root: path.resolve('./assets'),
        extensions: ['', '.js', '.less']
    }
};

我的index.js如下所示

$(document).ready(function () {
    var body = $('body');

    var backgrounds = new Array(
        'url(./../images/bg1.jpg)' ,
        'url(./../images/bg2.jpg)' ,
        'url(./../images/bg3.jpg)' ,
        'url(./../images/bg4.jpg)'
    );
    var current = 0;

    function nextBackground() {
        console.log("Changing bg");
        current++;
        current = current % backgrounds.length;
        body.css('background-image', backgrounds[current]);
    }

    setInterval(nextBackground, 1000);

    body.css('background-image', backgrounds[0]);
});

执行时抛出错误

Uncaught ReferenceError: $ is not defined

我真的不理解这个错误，因为如果我查看生成的bundle.js，Jquery显然是被定义的

我已尝试将此添加到我的解决方案中：

resolve : {
    root: path.resolve('./assets'),
    extensions: ['', '.js', '.less'],
    alias: {
        jquery: "jquery"
    }
}

但错误仍然存在

编辑：这是创建的bundle.js的一个片段

var $ = __webpack_require__(2);

    __webpack_require__(3);
    __webpack_require__(4);

---

根据您的代码，您需要将其添加到您的index.js

var $ = require('jquery');

这是因为当您使用webpack构建代码时，每个文件（例如index.js）都会被包装成一个由webpack定义的函数

因此main.js中定义的所有变量都无法访问index.js，因为它们现在处于不同的函数中，不共享相同的作用域

您可以使用向全局（

窗口

）公开jquery，也可以手动要求使用jquery

---

希望这能解决您的问题。：）

根据您的代码，您需要将其添加到您的index.js

var $ = require('jquery');

这是因为当您使用webpack构建代码时，每个文件（例如index.js）都会被包装成一个由webpack定义的函数

因此main.js中定义的所有变量都无法访问index.js，因为它们现在处于不同的函数中，不共享相同的作用域

您可以使用向全局（

窗口

）公开jquery，也可以手动要求使用jquery

---

希望这能解决您的问题。：）

您需要的是：

自动加载模块。当标识符（键）用作模块中的自由变量时，将加载模块（值）。标识符由加载模块的导出填充

例如： 将此插件添加到您的配置：

new webpack.ProvidePlugin({
    $: "jquery"
})

在代码中的某个地方：

// in a module
$("#item") // <= just works
// $ is automatically set to the exports of module "jquery"

//在模块中
$（“#项”）//您要查找的是：

自动加载模块。当标识符（键）用作模块中的自由变量时，将加载模块（值）。标识符由加载模块的导出填充

例如：
将此插件添加到您的配置：

new webpack.ProvidePlugin({
    $: "jquery"
})

在代码中的某个地方：

// in a module
$("#item") // <= just works
// $ is automatically set to the exports of module "jquery"

//在模块中
$（“#item”）//仅要求jquery不起作用吗？如果我查看
bundle.js
它似乎要求所有内容都正确。（也是jquery）只要求jquery不起作用吗？如果我查看
bundle.js
它似乎要求所有东西都正确。（也是jquery）啊，我知道，在我的例子中，$只是在函数中本地定义的。谢谢你清理这个，它正在工作。我也会调查-loader@JakobAbfalter确切地享受：）啊，我明白，在我的例子中，$只是在函数中本地定义的。谢谢你清理这个，它正在工作。我也会调查-loader@JakobAbfalter确切地享受：）