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