這篇文章要跟大家介紹的內容是關於淺析如何透過webpack引入第三方函式庫，有著一定的參考價值，有需要的朋友可以參考一下。
一般來說，引入第三方函式庫有一下三種情況：
透過CDN引入；
透過npm安裝並引入；
第三方js檔案就在本地
這是最簡單的一種方式，例如引入高德地圖，可以直接把以下程式碼放在index.html檔案底部，這種情況與webpack無關，因為webpack的入口檔案並不在此處
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>
透過npm install安裝的套件會放在node modules資料夾下，使用時，可以直接在使用到的檔案頂部引入進來，例如import或require。但如果每個模組化的文件都會用到，那麼每個文件都要去引入這個第三方文件，很繁瑣，這時候就可以用webpack的插件：ProvidePlugin，可以理解這個插件的作用就是把第三方庫引入，且它的作用域是全域的。
例如引入jquery
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})那麼就可以用$和jQuery了，它們兩個都表示jquery，需注意的是$和jQuery後面的值（jquery）必須和npm install jquery中的jquery保持一致，不然會找不到。
會有這麼一種狀況：第三方的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'),
}
}這樣就可以了。
除了ProvidePlugin這個插件，還有一個imports-loader可以完成引入第三方函式庫的工作。
test來指定哪個檔案需要引入第三方函式庫,透過options設定jquery。然後打包後可以看出，打包後的app.js檔案變大了。
module: {
rules: [
{
test: path.resolve(__dirname, "./src/app.js"),
use: "imports-loader"
options:{
$:'jquery'
}
}
]
}相關推薦：
以上是淺析如何透過webpack引入第三方函式庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
