2017-05-15修改 npm init那邊的命名，改取非webpack名字避免無法安裝webpack。置換package.json的圖片錯誤內容。
點進去documentation後會連結到一個新的webpack網站，在點擊上方的 install it就可以連結到安裝webpack的說明頁面。
在這邊我們會看到安裝說明會有分 『Local installation』與 『Global Installation』。
$ node_modules/.bin/webpack -v ----- 看webpack 版本。
但是這個之後可以採用nodejs提供的package.json的script簡化我們下指令的複雜度，所以我們練習用可以採用local installation，因為就算真的弄亂了就只要把node_modules這個資料夾刪除重裝就好，不用擔心搞亂系統本身的相依函式庫。
$ webpack -v ---看webpack 版本
缺點是升級版本的時候可能會有機率出現函式庫也要更改的問題或是搞亂系統的危險。通常都是建議使用local installation，當然如果電腦只有你一個人在用你要安裝在系統也是可以，但是如果你希望你最後做出來專案可以上傳到github之類的地方然後在別台電腦下載也能使用的話就建議你用local installation，
例如：
A電腦： 你有sudo 的權限所以安裝webpack 在系統裡。
B電腦： 你沒有sudo 的權限所以你就沒辦法把webpack 安裝在系統裡去開發專案。
用 local installation 就沒有這種問題，到哪邊只要能在local下有寫入權限就可以開發專案！
首先我們先在自己的home下建立一個資料夾做練習用：
$ cd ~ ---- 回到home目錄
$ mkdir webpack ---- 建立 webpack 目錄
$ cd webpack ---- 進入 webpack 目錄
我們正式安裝 webpack：
~/webpack $ npm install --save-dev webpack
之後會發現webpack目錄下多了一個叫做node_modules的目錄，webpack就被安裝在這裡了。
有點像是這個專案的需要用到的軟體清單之類的文件，而且他的公用還不只這些甚至可以幫我們要執行的一些指令寫在這個package.json的檔案內，讓我們不用打一長串的指令就可以執行我們要執行的命令喔！
~/webpack/ $ npm init
之後會看一些詢問你這個專案的基本資料(這邊我們把name不要用預設的"webpack"，否則之後安裝webpack會有一些小問題。)其他的不想打就全部都按Enter就好，最後一個打yes就可以了，接著就會看到目錄下面多了一個叫做package.json檔案。
我們可以用文字編輯器打開看一下package.json檔案內容並且會發現在devDependencies那邊已經紀錄了我們安裝的webpack與版本資訊。
然後在webpack 資料夾下我們用命令列下 $ node_modules/.bin/webpack -v 應該會顯示webpack的版本這樣代表我們已經安裝成功了！
------- 待續
繼續：
接續上一個章節在我們安裝完npm與nodejs之後，我們開始著手安裝webpack吧！webapck 版本：
在webpack的官網我們可以看到有分1.x 與 2.x 這邊我們就直接從2.x開始學習吧！
點進去documentation後會連結到一個新的webpack網站，在點擊上方的 install it就可以連結到安裝webpack的說明頁面。
在這邊我們會看到安裝說明會有分 『Local installation』與 『Global Installation』。
1. Local installation:
他會把webpack 裝在你目前的目錄下的一個叫做node_modules目錄內，所有透過參數 --save-dev 的npm 安裝的軟體都會放在目前目錄下的node_modules內，好處就是不會去污染到系統的軟體與函式庫，但是缺點就是不能像在使用系統軟體直接打指令名稱就會自動執行，必須透過相對路徑來執行。例如：$ node_modules/.bin/webpack -v ----- 看webpack 版本。
但是這個之後可以採用nodejs提供的package.json的script簡化我們下指令的複雜度，所以我們練習用可以採用local installation，因為就算真的弄亂了就只要把node_modules這個資料夾刪除重裝就好，不用擔心搞亂系統本身的相依函式庫。
2. Global installation:
他會把webpack 裝在系統的位置下，讓每個人都可以去使用webpack並且會把需要用到的函式庫也一併裝在系統下。好處就是只要打webpack 就可以直接執行。$ webpack -v ---看webpack 版本
缺點是升級版本的時候可能會有機率出現函式庫也要更改的問題或是搞亂系統的危險。通常都是建議使用local installation，當然如果電腦只有你一個人在用你要安裝在系統也是可以，但是如果你希望你最後做出來專案可以上傳到github之類的地方然後在別台電腦下載也能使用的話就建議你用local installation，
例如：
A電腦： 你有sudo 的權限所以安裝webpack 在系統裡。
B電腦： 你沒有sudo 的權限所以你就沒辦法把webpack 安裝在系統裡去開發專案。
用 local installation 就沒有這種問題，到哪邊只要能在local下有寫入權限就可以開發專案！
Step1:
好了知道這邊的差別之後我們開始安裝local installation webpack 吧！首先我們先在自己的home下建立一個資料夾做練習用：
$ cd ~ ---- 回到home目錄
$ mkdir webpack ---- 建立 webpack 目錄
$ cd webpack ---- 進入 webpack 目錄
我們正式安裝 webpack：
~/webpack $ npm install --save-dev webpack
之後會發現webpack目錄下多了一個叫做node_modules的目錄，webpack就被安裝在這裡了。
Step2:
在安裝完webpack後執行 npm init 這邊會透過npm 產生一個專案的初始檔(package.json)，可以用來紀錄你用npm 裝了哪些軟體並且只要有這個檔案就算你在別台電腦開發，只要那台電腦有裝npm 就可以叫npm 去參考這個package.json的檔案內容把我們要開發用的軟體裝到這台電腦裡面。有點像是這個專案的需要用到的軟體清單之類的文件，而且他的公用還不只這些甚至可以幫我們要執行的一些指令寫在這個package.json的檔案內，讓我們不用打一長串的指令就可以執行我們要執行的命令喔！
~/webpack/ $ npm init
之後會看一些詢問你這個專案的基本資料(這邊我們把name不要用預設的"webpack"，否則之後安裝webpack會有一些小問題。)其他的不想打就全部都按Enter就好，最後一個打yes就可以了，接著就會看到目錄下面多了一個叫做package.json檔案。
我們可以用文字編輯器打開看一下package.json檔案內容並且會發現在devDependencies那邊已經紀錄了我們安裝的webpack與版本資訊。
然後在webpack 資料夾下我們用命令列下 $ node_modules/.bin/webpack -v 應該會顯示webpack的版本這樣代表我們已經安裝成功了！
------- 待續
留言
張貼留言