Webpack: 表达模块依赖

Question

我正在尝试在webpack应用程序中使用require导入bootstrap-webpack模块。

它似乎需要jQuery，因为打包后的JavaScript会抛出以下错误：

未捕获的引用错误：jQuery未定义

我该如何指定jQuery是bootstrap-webpack模块的依赖项以解决此问题？感觉这应该很简单，但我一直在努力弄清楚。

我已经尝试添加：

"jquery": "latest"

我尝试在package.json中的bootstrap-webpack依赖项上进行更改，但没有起作用。 文档不完整，我似乎找不到关于这个问题的太多信息。 这应该很简单，对吧？帮帮忙！

- eye_mew

Answer 1

有两个可能的解决方案：

使用ProvidePlugin：它会扫描源代码中给定标识符并将其替换为对给定模块的引用，就像已经被 require 一样。

// 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。

- Johannes Ewald

---

在使用grunt-webpack时，似乎无法使用imports-loader。 - tutuca

使用提供的插件与bootstrap-webpack模块一起运作良好。 - user2015707

谢啦，使用 webpack.ProvidePlugin 和本地 npm 安装的 Bootstrap 和 jQuery 已经可用。 - Gábor Imre

Answer 2

通过这个 github 问题。

安装 expose-loader 并在主要入口点中添加 require('expose?$!expose?jQuery!jquery');，然后再 require webpack-bootstrap。

这将把 jQuery 设置在 window 上，以便任何文件都可以获取它。但请注意，使用此方法时，所有文件都将能够访问该版本的 jQuery，而不管是否显式地需要它。

- Derek Dahmer

---

奇怪的是，在OSX上我不需要这个，但在Windows上我发现这是必需的才能使事情正常工作。 - vee