Webpack:表达模块依赖

Question

我正在尝试使用webpacked应用程序中require的bootstrap-webpack模块.

它似乎需要jQuery,因为捆绑的javascript然后抛出以下内容:

未捕获的ReferenceError:未定义jQuery

我如何指定webpack jQuery是bootstrap-webpack模块的依赖项,以解决这个问题？感觉它应该是微不足道的,但我一直在努力弄明白.

我试过添加:

"jquery": "latest"

在bootstrap-webpack中的dependecies package.json,但这不起作用.该文档是不完整的,我似乎无法找到很多关于这个问题.这应该是微不足道的吧？救命!

Answer 1

有两种可能的解决方案:

使用ProvidePlugin:它扫描给定标识符的源代码,并将其替换为对给定模块的引用,就像它已被要求一样.

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

使用imports-loader:它提供了预备require()语句等准备工作的可能性.

// webpack.config.js
{
    ...
    module: {
        loaders: [
            { test: require.resolve("jquery"), loader: "imports?jQuery=jquery" }
        ]
    }
}

在这种情况下,您需要先运行npm install imports-loader --save.

Answer 2

通过这个github问题.

在需要webpack-bootstrap之前安装expose-loader并添加require('expose?$!expose?jQuery!jquery');到主入口点.

这将在窗口上设置jQuery,因此任何文件都可以获取它.小心使用此方法,无论是否明确要求,所有文件都可以访问该版本的jQuery.