通過webpack引入第三方庫的方法
一般來說，引入第三方庫有一下三種情況：
- 通過CDN引入；
- 通過npm 安裝并引入；
- 第三方js文件就在本地
通過CDN
這是最簡單的一種方式，例如引入高德地圖，可以直接把以下代碼放在index.html文件底部，這種情況與webpack無關，因為webpack的入口文件并不在此處
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申請的key值"></script>
npm
通過npm install安裝的包會放在node modules文件夾下，當使用時，可以直接在用到的文件頂部引入進來，例如import或者require。但如果每個模塊化的文件都會用到，那么每個文件都要去引入這個第三方文件，很繁瑣，這時候就可以用webpack的插件：ProvidePlugin，可以理解這個插件的作用就是把第三方庫引入，且它的作用域是全局的。
例如引入jquery
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
那么就可以用$和jQuery了，它們兩個都表示jquery，需注意的是$和jQuery后面的值（jquery）必須和npm install jquery中的jquery保持一致，不然會找不到。
本地JS庫文件
會有這么一種情況：第三方的js文件就在本地，怎么通過webpack引入呢？比如第二種jquery的情況，
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
這樣寫肯定會找不到jquery了，因為它并不在node modules中，這時可以用webpack配置中的resolve選項，給jquery指定一個別名，并配置其路徑。
假如我們的jquery.js文件放在dist文件夾下面
resolve:{
alias: {
$: path.resolve(__dirname, './dist/jquery.js'),
jQuery: path.resolve(__dirname, './dist/jquery.js'),
}
}
這樣就可以了。
通過loader
除了ProvidePlugin這個插件，還有一個imports-loader可以完成引入第三方庫的工作。
test來指定哪個文件需要引入第三方庫,通過options配置jquery。然后打包后可以看出，打包后的app.js文件變大了。
module: {
rules: [
{
test: path.resolve(__dirname, "./src/app.js"),
use: "imports-loader"
options:{
$:'jquery'
}
}
]
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript函數(shù)庫-集合框架...2007-04-04
這篇文章主要為大家詳細介紹了微信小程序自定義模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)星級評分，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
Document:getElementsByName()使用方法及示例
Document:getElementsByName()想必大家對它并不陌生吧，主要是根據(jù)名稱獲取元素，下面是其具體的使用方法及范例，感興趣的朋友不要錯過2013-10-10
適用于javascript開發(fā)者的Processing.js入門教程
這篇文章主要介紹了適用于javascript開發(fā)者的Processing.js入門教程，感興趣的小伙伴們可以參考一下2016-02-02
JavaScript學習筆記(三)：JavaScript也有入口Main函數(shù)
大家都知道在c和java中，有main函數(shù)貨main方法作為一個程序的入口函數(shù)或方法。在JS中從js源文件的頭部開始運行的，我們?nèi)匀豢梢蕴摌嫵鲆粋€main函數(shù)來作為程序的起點，這樣一來不僅可以跟其他語言統(tǒng)一了，而且說不定你會對JS有更深的理解。感興趣的小伙跟著小編一起學習吧2015-09-09
JS信息收集代碼研究(獲取客戶端的瀏覽器、cpu等軟硬件信息)
聽朋友說，這段JavaScript信息收集代碼主要用于收集IP......等等什么的，用來研究,需要的朋友可以參考一下2023-06-06
這篇文章主要介紹了javascript瀑布流布局實現(xiàn)方法,結合實例形式較為詳細的分析了JavaScript實現(xiàn)瀑布流布局的樣式與具體功能代碼,需要的朋友可以參考下2016-02-02
這是一個由JS實現(xiàn)的網(wǎng)頁密碼保護代碼，在進入網(wǎng)頁前需要在彈出框中輸入密碼才可以，不過現(xiàn)在不怎么用了，一般情況下，目前都在后臺處理這種功能，用戶輸入用戶名和密碼后交給服務器處理，然后再返回信息，若登錄無誤就可看到某些內(nèi)容2013-04-04
當時在做登錄那邊需要做一些交互,所以必不可少要用到消息提示框,下面這篇文章主要給大家介紹了關于Uniapp全局消息提示以及其組件的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06