淺析如何透過webpack引入第三方函式庫

這篇文章要跟大家介紹的內容是關於淺析如何透過webpack引入第三方函式庫，有著一定的參考價值，有需要的朋友可以參考一下。

一般來說，引入第三方函式庫有一下三種情況：

1. 透過CDN引入；

2. 透過npm安裝並引入；

3. 第三方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'
                }
            }
        ]
    }

相關推薦：

對於webpack4.0配置的詳解

#vue中config/index .js:配置的詳解

以上是淺析如何透過webpack引入第三方函式庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！