走進webpack（2）--第三方框架（類庫）的引入及抽離

　　正文以前，因爲這是一個系列的文章，可能第一次看到的看官老爺們會以爲突兀，若是你是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已經出如今咱們的頁面之中了。這兩天一直加班，因此更新的有點慢，這個系列的文章還有最後一篇，儘可能在這兩天就能夠完成。