正文之前，由於這是一個系列的文章，可能第一次看到的看官老爺們會覺得突兀，如果你是webpack新手，我建議你先從前幾篇文章看起，如果你對webpack有一些了解，也希望可以在github上下載代碼，對照着看會更有效果
在當代的前端開發中，很少會用原生JS來開發頁面，最基本的都會使用jQuery來節省我們開發的時間和效率，而angular，vue，react的出現更是為前端開發者帶來了福音。那么這篇文章就說說如何用webpack來打包引入第三方框架（類庫）。如果單純的引入jQuery或者其他第三方類庫，在打包的時候webpack會把它一起打包進我們的main.js，也就說，如果我們引入兩三個框架，兩三個UI庫，那么我們的集成包會很大，頁面的加載時間也會很長，這是我們不願見到的結果。所以在學會引入的同時，還要知道如何把第三方類庫從我們的業務邏輯包中抽離出來。
那么我們先來安裝一下jQuery，因為在生產環境我們仍舊是需要jQuery作為依賴的，所以我們需要用npm install jquery --save來安裝它。安裝完成之后，我們在main.js中增加兩行代碼：
//引入jQuery import $ from 'jquery'; //編寫jQuery代碼 $('#jqueryDiv').html('Hello Zaking,jQuery is useful');
我們還需要在index.html中增加一個div容器：
<!-- jQuery代碼容器 --> <div id="jqueryDiv"></div>
然后，我們npm run dev看一下，會發現頁面中已經有jQuery代碼所生成的文字，說明我們引入jQuery成功了。你可以在每一個需要jQuery的頁面這樣引入。但是這樣會很麻煩，我們如果通過這樣的方式引入了jQuery，但是整個項目中卻並沒有寫一行jQuery代碼，那么webpack也是會把它打包進去的。而且每一個需要jQuery的頁面都需要引入的話好麻煩，那么我們可以使用ProvidePlugin來實現一次引入全局使用，而且通過插件的方式來引入第三方類庫，如果你不使用它的話，webpack就不會打包它，還不錯吧。由於ProvidePlugin是webpack自帶的插件，我們不需要引入他，但是需要引入一下webpack：
//引入webpack const webpack = require('webpack');
我們還需要在入口文件引入jQuery，還記得前面模塊化的時候把入口文件單獨拆分成了一個entry.js，所以我們在其中增加一點代碼，現在看起來應該是這樣的：
entry.path={ main:'./src/main.js', jquery:'jquery' }
然后我們在plugins項下配置一下這個插件，就像這樣：
//創建一個webpack下的ProvidePlugin插件的實例，使全局都可以使用jQuery new webpack.ProvidePlugin({ $:"jquery" })
這樣就可以了，但是別忘了把main.js中通過import引入的jQuery代碼刪除，然后再npm run dev試一下。會發現也同樣出現了jQuery生成的文字。
那么下面我們就學習一下，如何抽離第三方類庫，使其存儲在一個單獨的文件夾下，在webpack3時代，通常是使用CommonsChunkPlugin，CommonsChunkPlugin也是webpack自帶的插件。官方文檔是這樣解釋他的：CommonsChunkPlugin 插件，是一個可選的用於建立一個獨立文件(又稱作 chunk)的功能，這個文件包括多個入口chunk 的公共模塊。通過將公共模塊拆出來，最終合成的文件能夠在最開始的時候加載一次，便存到緩存中供后續使用。這個帶來速度上的提升，因為瀏覽器會迅速將公共的代碼從緩存中取出來，而不是每次訪問一個新頁面時，再去加載一個更大的文件。
簡單來說，就是將公共模塊拆分出來以便使瀏覽器加載速度更快。但是在webpack4時代，已經取消了這個插件取而代之的是splitChunks 和runtimeChunk ，那么我們就來看一下，在webpack4的環境下，如何抽離多個第三方類庫。
我們先來安裝一下vue，跟jQuery的安裝方式一樣，就不多說了，同樣的我們也需要在入口文件處引入vue：
entry.path={ main:'./src/main.js', //引入jQuery和vue jquery:'jquery', vue:"vue" }
然后再ProvidePlugin中加入vue這個選項：
new webpack.ProvidePlugin({ $:"jquery", vue:"vue" })
然后我們在plugins中增加一個配置：
new webpack.optimize.SplitChunksPlugin({ chunks: "all", minSize: 20000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, name: true })
然后我們npm run build一下，會發現在dist的根目錄下已經生成了vue.js和jQuery.js。說明我們打包成功了。那么我們想要測試一下，vue究竟能用了么？
我們在main.js中引入vue，並且加上vue官網例子中最簡單的一個：
import Vue from 'vue' //vue代碼 var app = new Vue({ el: '#vueApp', data: { message: 'Hello Vue!' } })
然后，我們在index.html創建一個div容器：
<!-- vue容器 --> <div id="vueApp"> {{message}} </div>
然后我們試一下npm run dev，頁面打開之后我們發現沒有hello vue，f12看下控制台，發現報錯了。不出意外的話，你的報錯信息是這樣的：
什么意思呢，官方解釋是：運行時構建不包含模板編譯器，因此不支持 template 選項，只能用 render 選項，但即使使用運行時構建，在單文件組件中也依然可以寫模板，因為單文件組件的模板會在構建時預編譯為 render 函數。就是說，如果我們想使用template，我們不能直接在客戶端使用npm install之后的vue。
那么我們需要新增一點配置：
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } //resolve是在最外層的，與plugins等同級
這樣就可以了，然后運行一下，會發現Hello Vue已經出現在我們的頁面之中了。這兩天一直加班，所以更新的有點慢，這個系列的文章還有最后一篇，盡量在這兩天就可以完成。