上一篇我們介紹了在Windows 10建立node.js開發環境和安裝webpack。這篇我們就來介紹如何用webpack建立專案資料夾，來打包我們的Javascript建立網站吧!
一、建立專案資料夾
建立資料夾不一定要在cmd下指令，也可以在想建立專案資料夾的windows路徑，按下滑鼠右鍵新增資料夾、重新命名資料夾名稱即可。這邊我們直接在cmd中建立一個資料夾。
mkdir webpack-test
接著移動到我們建立的webpack資料夾，這邊就一定要下指令來了。
cd webpack-test
二、建立npm專案
進入專案資料夾後輸入npm init來建立一個npm專案 接著，這個指令可以生成 一個package.json 來管理使用到的 pacakge。
npm init
建立專案後，會在專案資料夾建立一個package.json檔案來紀錄有關專案的資訊，問題中括號內表示的是預設值，如果沒輸入就會採用預設值，專案需要輸入的九項資訊說明如下：
package name：專案名稱，預設使用你建立的資料夾名稱。version：專案的版本，預設使用1.0.0。description：專案描述資訊，預設可以留白。entry point：專案執行時會先執行哪一個程式檔案，預設使用index.js。test command：設定一個指令來執行動作，這裡可以先留白。git repository：專案的版本控制位置，可以是先留白。keywords：專案的關鍵字，可以先留白。author：專案的作者名字，可以先空白。license：專案的版權協定，預設使用ISC。ISC是一種開源授權，允許他人基於任何目的的使用、複製、修改專案程式碼，不用支付任何費用，其他授權可參考開放文化基金會的自由軟體授權分析。
最後輸入完會讓你確認輸入的資訊正不正確，正確的話輸入yes即可。
如果不想每次建立npm專案都要輸入這些資訊的話，可以在建立npm時，加上-y，就能快速建立全部使用預設值的專案。
npm init -y
三、使用npm管理套件
npm可以用來管理專案需要用到的套件對，例如我們要使用被webpack來打包javascript檔案，只需要輸入：
npm install webpack — save-dev
就會幫我們將webpack這個套件加入剛剛我們建立的package.json檔案中， 在devDependencies這個欄位顯示。
另外也記得加入webpack-cli:
npm install webpack-cli -dev
四、建立webpack網站
我們先建立一個簡單的index.js來讓webpack打包，放到專案資料夾中。
console.log("hello webpack!");
接著我們需要建立一個webpack設定檔案，檔名限定為 webpack.config.js，在裡面需要輸入給webpack的訊息：
此時的專案資料夾目錄結構為：
當我們擁有要打包的JavaScript及webpack.config.js設定檔後，就可以來執行打包了，在我們的專案資料夾中輸入：
webpack -p
看到這個執行完成就代表打包成功，也可以在目錄發現打包完成的檔案bundle.js：
此時，我們再建立一個index.html來執行我們的bundle.js檔案，就完成我們第一個webpack網站了!index.html的程式碼如下：
打開index.html的執行結果：
太好了，這樣我們就完成了我們第一個webpack網站了，從打包javascript到執行javascript!
下一篇會再來介紹如何用Webpack設定Loader來將ES6編譯成ES5的語法。
這是小弟第一次撰寫webpack的文件，如果有不足的地方，再請各方大大多多說明、補充謝謝!
