溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一般來說，引入第三方庫有一下三種情況：
通過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'
}
}
]
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
