webpack如何全局引入jquery和插件?

jquery和插件都在項目目錄下。

全局加入jquery已經好了，但是想全局引入其他的jquery的插件，比如bootstrap和jquery UI.

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


---

曾經我試過把 jQuery 打包進 vendor，雖然 $ 好用了，但是 jQuery 下的一系列插件就叫苦了。你想直接從 HTML 中引入 jQuery 的第三方插件？no way！既然 $ 算是 webpack 中的一個變數，那麼你只能通過 require 的方式引入 jQuery 的第三方插件。第三方的插件命運只有兩個，要不你就被打包進入引入你的 js 文件里，要不你就被引入 vendor 里。

命運一，打包進引入的 js 文件里。如果多個 js 文件都引入了某一個 jQuery 插件，那麼就會出現很多重複的代碼，冗餘。

命運二，打包進 vendor 里。如果都打包進一個 vendor 里，那該文件得多大啊！自己手動配 vendor？你知道哪個插件用到的次數多，哪個用到的少嗎？麻煩。

後來我想，乾脆第三方的插件我都不加入到 webpack 里，只有自己編寫的代碼用 webpack 來模塊化就行了。第三方插件雖然都單獨用了一個 http 請求，但它們改動不大，最終都會被瀏覽器緩存起來。

說做就做，於是有以下幾個需處理的事情：

1、如何引入 jQuery？

2、如何引入 jQuery 插件？

3、如何引入不依賴 jQuery 的普通第三方插件？

jQuery 直接在 html 中引入，然後在 webpack 中把它配置為全局即可。

externals: {
jquery: "window.$"
},


使用則直接 require 進來，反正 webpack 也不會把它打包進來。

var $ = require("jquery");


既然 $ 已經被設置為全局了，那麼掛載在它下面的一系列 jQuery 插件就好辦了，直接在 html 中引入。

&

使用：

var $ = require("jquery");

其它全局組件也一樣的，但是看情況最好做一些處理，比如jquery本身套了一層factory來兼容amd等模塊格式，你先把這些東西刪掉，然後用webpack編譯一遍，會自動打包一個webpack包裝過的jquery，這個jquery也是可以直接&引用的，也可以require。

還有些看情況是否要改成commonJS的格式導出對象，就是module.exports=xx這樣。

總之有一條，改動後先用webpack轉換一遍庫本身再用。

還有一些插件我覺得比較麻煩，理解了webpack的工作方式了稍微改下庫的源碼其實很簡單。

---

new webpack.ProvidePlugin({

$:"jquery",

jQuery:"jquery",

"window.jQuery":"jquery"

})

這樣就引入了jquery, 但引入bootstrap真是愁死我了

---

瑪德，用webpack還要改造插件，真是我勒個去！

---

作為phper，這個webpack的確很吸引人，但是要調用插件的時候真是痛苦的很，所以，我還是堅持用gulp，易懂

---

externals: {
"jquery": "window.jQuery",
}


我直接這樣寫的，使用的時候並沒有用 var $ = require("jquery")

但是正常工作啊，不知道這樣寫有沒有副作用。

---

建議看一下官網的例子：expose-loader，寫的很詳細，兩種方法，後一種是指用於react，前一種引用的時候注意修改一下路徑哈

---

贊

---

module.exports = {
...
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
};


---

留個腳印，不錯，

---

同樣求解

---

推薦閱讀：