Webpack 的學習(1) -------- 安裝 nodejs 與npm

起因：

由於小弟是這兩年才開始踏入前端的這個行業，因此一開始也只是把以前在大學學的html觀念拿來用在前端上面，後面開始接觸到Django這套python的framework比較像似全端（前端+後端）的東西就發覺早期的網頁技術跟觀念真的很不方便。之後由於專案需求試著開始用Angular2 這套pure的前端framework，這時候才發現前端的變化太快，快到早期大學學的東西跟現在業界前端在使用的觀念、lib已經有好大的斷層並且在使用Angular2的時候發覺的用起來真的很方便，但是其底層是用了很多前端的技術 如：webpack、ES6、commonJS、AMD、babel....等很多其實都沒用的lib與觀念，不過由於google的整合與angular-cli的這個工具把底層要自己架設的webpack環境都遇先幫你弄好了大大的降低新手入門的門檻。在專案結束後也該開始看看webpack這套目前最多人使用的打包工具了。

感覺上webpack支援很多目前前端較新的觀念與技術工具，因此在有一個世代技術落差的我使用起來就很卡卡的，原因是太多東西沒聽過也沒用過，所以打算寫篇blog做做紀錄如果有厲害的前端大大在煩請指導囉！

目標：

試著使用webpack來打包一個小小的網站並了解與使用webpack相關的知識。

系統：

OS 為linux mint 18.1 (base on ubuntu 16.04)
Ram: 16GB

Step 1:

由於webpack 主要透過npm 來安裝而且目前Javascript的開發很多都是建立nodejs上面因此一開始我們先安裝nodejs吧！ 而且裝了nodejs就附帶提供npm 工具讓我們可以透過npm 下載安裝許多javascript的函式庫、軟體與工具。

先到nodejs的官方網站來安裝nodejs。


這邊我們採用 LTS 的長期維護的版本作為nodejs的使用，但是我們透過apt的方式來下載所以是點選LTS那個左下方的『other Downloads』連結。


進到這個頁面之後我們選擇最下方的『Installing Node.js via package manager』的方式來安裝。（ubuntu系統最好用的apt不用白不用啊！）

Step2:

到了package manager頁面之後由於我是用linux mint 18.1 是屬於ubutnu deb系統的，所以選擇『Debian and Ubuntu based Linux distributions』



接著就會看到如何新增 nodejs的source list 到apt裡面去，這邊要注意的是我們採用的nodejs LTS v6.10.3所以請安裝6.x的版本，如果安裝過程有出現問題代表你可能沒有build tools 所以先安裝build-essential 後再安裝nodejs v6.10.3



安裝完後開啟命令列輸入 :
$ nodejs  -v                                <--- font="" nodejs="">
$ npm   -v                                    <--- font="" npm="">



這樣我們就把nodejs 與 npm 安裝完畢了。下一個章節我們就開始安裝webpack了。

                                                                      ------待續。