Webpack2 入門(1)

官網 Webpack

介紹

近幾年 Webpack 興起,那 Webpack 到底是什麼呢?

Webpack 是一個 JavaScript 模組的打包工具。我們平常在寫網頁的時候,往往會載入很多其他人寫好的 .js

而平常我們最常用的就是利用 CDN(content distribution network) 的方式載入,當我們需要載入多個外部的 .js 檔時,我們的程式碼就會有很多個 “ ,隨著程式碼越來越複雜,維護的難度也會隨之上升。

舉個例子說明:

假設我們寫了一個 index.js 程式碼,在我們寫的 js 裡頭用到了 lodash.js 宣告的變數 _。今天我們的 index.html 因為載入我們自己寫的 js,所以在載入之前一定要先載入 lodash.js 否則會出現錯誤。

index.js

function component () {
  var element = document.createElement('div');

  /* lodash is required for the next line to work */
  element.innerHTML = _.join(['Hello','webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

 <html>
   <head>
     <title>webpack 2 demo</title>
     <a href="https://unpkg.com/lodash@4.16.6">https://unpkg.com/lodash@4.16.6</a>
   </head>
   <body>
     <a href="http://index.js">http://index.js</a>
   </body>
 </html>

因此 Webpack 就是來解決這類問題的。利用 Webpack 我們可以將原本很龐大的 .js 拆成很多個模組,而各模組間宣告的變數彼此不會互相影響,最後利用 Webpack 將我們寫好的程式打包成少數幾個檔案 (.js, .css …)使用。

接下來會說明如何利用 Webpack 打包一個 js檔。

參考

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s