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定义的函数中。

因此，main.js中定义的所有变量都无法访问index.js ，因为它们现在处于不同的功能中，它们不共享相同的范围。

您可以将jquery公开给全局（window）使用expose-loader，或者您需要手动要求 jquery 。

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

Answer 2

您要找的是ProvidePlugin：

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

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

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

代码中的某处：

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

确保通过NPM安装了jquery

webpack require（jquery）不起作用

2 个答案: