如果一個好的工具，若不能在短時間瞭解整個運作原理的話，那還不如捨棄它，對吧！
我們的生命遠遠比這些工具來得重要，寫程式的目的是要來人生更美好，所以今天的主題，就是要快速地讓看倌們，瞭解 webpack 主要的工作流程(workflow)，以利未來更深入的學習。
該動手做啦
，先來瞭解一個狀況，一般若未使用 webpack 時的 dependency 問題：
一、在專案資料夾下，建立 app/index.js
此檔有用到 lodash 的函式(_.map())：
function component(){
var ele = document.createElement('div');
// _.map 是 lodash 的函式
ele.innerHTML = _.map(['Hello','webpack'], function(item){
return item + ' ';
});
return ele;
}
document.body.appendChild(component());
二、在專案資料夾下，建立 index.html
因為 app/index.js 有用到 lodash，所以此檔就需要載入 lodash 函式庫：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack demo</title>
<script src="https://unpkg.com/lodash@4.16.6" type="text/javascript"></script>
</head>
<body>
<script src="app/index.js" type="text/javascript"></script>
</body>
</html>
以上這種是最常見的寫法，載入第一個 script，然後再載入第二個script，但這會有幾個問題：
有鑑於以上問題，我們可以透過 webpack 來幫我們解決。
安裝 Lodash，為什麼要安裝 Lodash 呢？其實也只是為了示範，因為往往在寫 js 的時候，會用到第三方的函式庫，例如 jQuery、Lodash…，所以這裡以 lodash 為例。
一樣要先移到專案資料夾底下去執行指令：
$ cd ~/path/to/webpack_proj
$ npm install --save lodash
一、修改 app/index.js
因為此檔需要使用 lodash，所以我們在第一行直接載入 lodash：
import _ from 'lodash';
// 以下程式不變
// ……
二、修改 index.html
此時只要載入 dist/bundle.js 檔即可，dist/bundle.js 就是下一步要使用 webpack 來建立的檔案。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack demo</title>
</head>
<body>
<script src="dist/bundle.js" type="text/javascript"></script>
</body>
</html>
三、使用 webpack 來 bundle app/index.js，產生 dist/bundle.js 檔：
執行以下指令，將 app/index.js 輸出成 dist/bundle.js 檔：
$ webpack app/index.js dist/bundle.js
Hash: 4c7c84c3aa8486304087
Version: webpack 2.1.0-beta.27
Time: 395ms
Asset Size Chunks Chunk Names
bundle.js 543 kB 0 [emitted] main
[3] ./app/index.js 263 bytes {0} [built]
+ 3 hidden modules
透過以上的示範，我們就可以說 使用 app/index.js 之前，需要使用 lodash 函式庫，有此相依性，故透過 webpack，將 app/index.js 與 lodash 打包(bundle) 在一起，產生 dist/bundle.js 模組。
這就是 模組化。
方才我們使用以下指令來輸出檔案：
$ webpack app/index.js dist/bundle.js
但其實我們可以透過設定檔的方式，來更彈性的運用，首先於專案資料夾下建立 webpack.config.js，內容如下：
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: './dist'
}
}
此時我們就可以使用以下指令來達成同樣的效果了：
$ webpack --config webpack.config.js
然而，只要你的專案資料夾下，有 webpack.config.js 檔案，webpack 預設上是會直接使用的，所以也可以直接執行以下指令即可：
$ webpack
是不是很簡單，明天，我們就持續來瞭解觀念性的東西喔。
iThome鐵人賽
看影片追技術