官網 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
檔。