javascript - webpack require (jquery) 不起作用

Question

我刚刚开始使用 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);

Answer 1

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

var $ = require('jquery');

这是因为当您使用 webpack 构建代码时，每个文件(例如 index.js)都会被包装到由 webpack 定义的函数中。

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

您可以使用 expose-loader 将 jquery 公开到全局(window)或者您需要手动请求jquery。

希望这能解决您的问题。 :)