webpack的學習(5) -------- vendor plugin 結合 npm 安裝第三方lib

2017-05-15 新增對 --save 與 --save-dev的說明與圖片錯誤。

緣由：

在上一章節我們透過下載 jQuery library 做打包的動作，這種情況是早期我們在撰寫網頁比較常遇到的情形。在後來有了nodejs之後我知道很多人都是直接採用npm 來安裝需要的開發用library，npm 是一套管理用javascript開發的軟體資料庫，npm 上面有許多我們撰寫專案可以用到第三方library並且會依照版本的不同去分類，所以很多好用的軟體或是大師寫的javascript應用軟體、函式庫都可以在上面取得，所以這次我們改採用npm 來安裝jQuery 並且做打包的行為。

Step1 不做Chunk：

首先我們跟上一章節一樣先做全部打包在一起的方式！我們先把vendors這個資料夾刪除因為我們要採用npm install的方式安裝jquery而不是自己去下載，然後在webpack資料夾下用命令列執行～ $ npm install --save jquery 來安裝jquery。這邊我們參數下了 --save 就是告知npm 把jQuery裝在local而非系統環境也就是說jQuery會裝在webpack下的node_modules資料夾下，真的搞爛了就把node_modules資料夾刪除就好，不用擔心系統被我們搞亂了！

~/ webpack $ rm -rf vendors
~/ webpack $ npm install --save jquery

之後我們打開 "package.json "這個檔案會看到在 "dependancies"這個屬性多了jquery的資訊與安裝的版本。這就是npm 的好處！裝了什麼東西會紀錄而且就算移到別台電腦去還可以把需要用到的套件透過npm 去裝回來。
這次我們在參數上改成 --save 而非之前webpack的 --save-dev。
兩者的不同是 --save-dev是告訴npm 『這只是開發用的套件』並不是在真正成品上會用到的套件！也就是說這個只是開發用，最後的成品沒有 webpack這個套件不會影響其功能的。
但是 --save則是我們最後成品中真正會用到的函式庫或是套件軟體！沒有這個套件或是函式庫我們的成品就沒辦法運作。

所以目前在webpack資料夾下的結構大致上會長這樣：

/webpack/
|-------/app/
| |-----index.js
|
|-------/node_modules/
|
|-------index.html
|-------package.json
|-------webpack.config.js

刪掉vendors這個資料夾並且把jquery裝到node_modules內。

Step2 :

接著修改webpack.config.js的內容把之前有關vendor與chunk的部份拿掉並且修改entry的app。

module.exports = {
  entry: {
    app: ["./app/index.js", "jquery"]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

這邊特別的是我們在entry的app內只有寫"jquery"與index.js的路徑，然而webpack對於jQuery會直接去node_modules去找有沒有這個library，如果有就會打包進來；如果沒有～再打包的時候就會出現錯誤！

下面就是沒有用npm裝jquery 執行webpack的錯誤資訊：

Step 3:

這邊別忘了我們app/index.js內我們對於jquery的引入也要跟著改變喔！因為我們已經把vendors刪除了。所以引入的地方要改成 " import $ from 'jquery' "

// ES6 feature. 從 jquery import $
import $ from 'jquery';

function componet() {
  var element = document.createElement('div');
  element.innerHTML = '<h2>Hello World</h2>'
  element.innerHTML += '<button id="myBtn">Test</button>';
  return element;
}

document.body.appendChild(componet());

// 透過jquery 取 button id
let $btn = $('#myBtn');

// 讓button 帶click事件，點擊時彈出'Hello World'
$btn.click(function(evt) {
    alert('Hello World!')
});

Step4:

別忘了我們也要修改index.html，因為之前我們是做chunk把jquery切割出來放在common.js內，
現在全部都打包在bundle.js內所以要把引入script的地方做修改並且把common.js那行拿掉。

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
    <script src='dist/bundle.js'></script>
  </body>
</html>

這樣子大致上就修改結束了。

Step 5:

執行"npm run start" 來看看結果如何！

然後用瀏覽器打開index.html 並且點擊 "Test" 按鈕來看看有沒有跳出alert 視窗！

表示jQuery 也都正常運作。
接下來我們來把jQuery 透過 chunk 切割出來讓使用者不需要重新下載vendors library吧！

Chunk Step1:

這邊我們要把jQuery切割出來首先先修改"webpack.config.js"的內容。
一樣也是在entry 內把 jquery挪到vendor屬性內並且加入plugins屬性。

const path = require('path')    // nodejs core module
var webpack = require('webpack')

module.exports = {
  entry: {
    app: ["./app/index.js"],  // 注意 jquery挪走了，別忘記逗號
    vendor: ['jquery']        // jquery 挪到這邊
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },        // 別忘記逗號
  plugins: [    // plugins 屬性要記得
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filename: 'common.js'
    })
  ]
}

這邊就是跟webpack講把jquery chunk出來到 common.js，觀念跟上一章節講的一樣。

Step 2:

由於我們chunk 出來了別忘記要修改我們剛剛的index.html！我們要把common.js載入這邊別忘記了common.js要比bundle.js早載入，否則bundle.js內index.js部份用到jQuery的global 變數 $就會出會undefined了。

<html>
  <head>
    <title>webpack 2 demo</title>
  </head>
  <body>
    <script src='dist/common.js'></script>
    <script src='dist/bundle.js'></script>
  </body>
</html>

這樣子index.html就修改完成了！

Step 3:

這邊大家以為要修改index.js吧！其實不用！因為在index.js我們已經使用ES6的方式把jquery import 進來了，在webpack這邊就會把jquery import做掉，有興趣的可以再打包之後打開bundle.js內看看webpack的import jquery的方式，那邊小弟還不熟只知道會透過 '__WEBPACK_IMPORTED_MODULE_0_jquery__'方式來引入，之後有空再來研究研究吧。

bundle.js 內容：

這邊我們只需要執行"npm run start"就可以。

在打包的過程就會看到common.js有被生出來！
接著一樣用瀏覽器打開index.html並且點擊 Test按鈕看看有沒有正確跑出alert視窗。
有的話就表示jQuery正常運作！如果沒有正常運作開啟瀏覽器的開發人員模式(shift + ctrl + i)
看看有沒有錯誤資訊、是不是 $ is not defined. 如果是代表在index.html內 common.js沒有引入或是比bundle.js還要晚引入。
如果是webpack打包過程就出現錯誤那可能就是沒有用npm安裝jQuery。多留心一錯誤訊息
看看是什麼問題囉！

這邊我們以後就可以直接透過npm安裝需要的套件與函式庫，並且透過簡單的webpack config來設定與chunk，並且在撰寫javascript的時候也可以更方便的引入第三方套件。
-------- 待續

CloverHsc的Blog

搜尋此網誌