stop...
在安裝之前，總該先瞭解一下為什麼要使用 webpack 呢？跟其它 Gulp、Grunt 有什麼差異呢？

為什麼要使用 webpack 呢？

webpack 是一種 module bundler，而 module bundler 主要目的，就是將所有跟網站前端有關的東西(js、css、images…)都打包成一個一個的模組，以利整個網站前端的使用。

跟 Gulp、Grunt 有差異嗎？

其實 Gulp、Grunt 是屬於 Task Runners，也就是你可以自己在 build process 中定義很多個任務(例：將某檔案壓成一行、linting)，然後依序執行檢驗。

那 webpack 可以和 Gulp 或 Grunt 一起使用嗎？

可以的，例如我慣用 Gulp，那麼就可以直接安裝 gulp-webpack 來使用。不過 webpack 的某些功能確實可以替代 Gulp 或 Grunt。所以我們將著重於僅使用 webpack 來達成網站前端的相關 build process。

在官方文件當中，webpack 版本目前已經出到 2.x 了，所以為了使用最新版本，接下來 30 天所有的文章，將會以 2.x 的版本為主，官方網站在此。

趕快來動手安裝吧：

前置需求

先到 Node.js ，安裝好 node 與 npm，以我的為例，安裝好後，在自己的電腦執行以下指令，看一下版本：

$ node -v
v7.2.0

$ npm -v
3.10.9

專案式安裝

在你習慣的資料夾中，建立專案資料夾(webpack_proj)，然後開啟 Terminal，移動至該路徑：

$ cd ~/path/to/webpack_proj

Node.js 初始化：
(執行指令，你可任意修改指令所詢問的問題，這裡都直接按 Enter 即可。)

$ npm init

安裝 webpack：

$ npm install webpack --save-dev

安裝完後，看一下 package.json 檔，發現 npm 尚未將 webpack 更新到最新的版本(原因是截至目前為止，2.x 都還是 beta 的版本)，只有到 1.13.3：

{
  …
  "devDependencies": {
    "webpack": "^1.13.3"
  }
}

但不要，我們要安裝的是 2.x 的版本，所以就要透過指定版本的方式來安裝了，先將剛才安裝好的 webpack 移除：

$ npm uninstall webpack --save-dev

再透過以下指令尋找 webpack 2.x 的版本，此時我們就知道最新的版本為 2.1.0-beta.27 了：

$ npm view webpack versions --json
[
  …
  "2.1.0-beta.23",
  "2.1.0-beta.24",
  "2.1.0-beta.25",
  "2.1.0-beta.26",
  "2.1.0-beta.27"
]

來安裝 webpack@2.1.0-beta.27 吧：

$ npm install webpack@2.1.0-beta.27 --save-dev

若順利完成的話，可以執行以下指令看所安裝的版本喔：

$ npm list webpack version
webpack_proj@1.0.0 /path/to/webpack_proj
└── webpack@2.1.0-beta.27

大功告成。

全域式安裝(不建議)

方才所介紹的是在特定資料夾當中，安裝 webpack，但若你想所有專案資料夾都使用同一套 webpack 的話，可直接執行以下指令即可(加個 -g 參數)：

$ npm install webpack@2.1.0-beta.27 -g

至於不建議的原因，就是往往本機端會有架設很多個網站，有時某個網站並不相容於某個 webpack 的版本，若有此狀況，就實在很麻煩，所以還是建議依據特定專案資料夾，來安裝各自的 webpack 喔。

明天，我將快速建立一個 bundle 的版本，展示 bundle 的魅力吧！