Webpack：表達模塊依賴關係

我想在我的webpacked應用程序中使用requirebootstrap-webpack模塊。Webpack：表達模塊依賴關係

這似乎需要jQuery的，因爲捆綁的JavaScript，然後再拋出以下：

未捕獲的ReferenceError：jQuery是沒有定義

我該如何去有關指定給的WebPack是jQuery是一個依賴於bootstrap-webpack模塊，解決這個問題？這感覺應該是微不足道的，但我一直在努力弄清楚。

我試着加入：

"jquery": "latest"

在引導-的WebPack的package.json，但這並沒有工作依賴條件。 documentation是不完整的，我似乎無法找到這個問題。這應該是微不足道的，對吧？幫幫我！

來源

2014-11-05 eye_mew

有兩種可能的解決方案：

使用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。

來源

2014-11-05 19:59:38

**使用grunt-webpack時，imports-loader **似乎不起作用。 – tutuca 2015-07-21 19:28:23

老實說，我不認爲他們會干涉... – 2015-07-22 20:30:48

使用提供插件與bootstrap-webpack模塊一起工作良好。 – 2015-12-02 15:35:49

通過this github issue。

安裝expose-loader並在需要webpack-bootstrap之前將require('expose?$!expose?jQuery!jquery');添加到您的主入口點。

這將在窗口上設置jQuery，所以任何文件都可以得到它。注意這個方法，所有文件都可以訪問該版本的jQuery，而不管它是否被明確需要。

來源

2015-05-21 04:29:20

奇怪的是，我並不需要OSX上的這個，但是在Windows上我發現這是讓事情起作用所必需的。 – vee 2016-03-07 15:13:04

Webpack：表達模塊依賴關係

回答

相關問題