從無到有建立 webpack 設定檔（一）
好吧，首先你想會想問什麼是 webpack, 依照官方網站的說明，可以用一張圖來表示它的功能：
為什麼要使用 webpack?
網頁寫久了，難免你會使用到一些需要編譯的語法來加速開發時間。像是 scss 啊、less啊、coffee啊、react啊、vue啊，甚至是 ES6。但搞笑的是，瀏覽器並沒有支援這些語法(廢話)。所以我們需要編譯器幫我們把這些語法做編譯轉為原生語法。(因為你不可能一直去 terminal 下指令轉換，是時間太多嗎？)
怎麼開始?
首先，你需要先安裝 nodeJS，而且你有2種選擇：
- 直接去官網下載安裝 node。
- 使用 node version manager (NVM) 安裝 node。
如果是去官網下載 node，那就沒什麼好說的，一直下一步就對了。
為什麼要使用 NVM下載？開發某個a專案時，a專案有指定 node 版本，然後b專案也是指定另一個 node 版本，我們當然不可能一直重複的安裝node, 此時就可以使用 nvm 來幫我們安裝並且切換電腦裡的 node 版本。
- windows 使用者直接安裝 nvm installer。
- mac 使用者請到 github 依照步驟安裝。
如果安裝完 node, 打開 terminal，並下指令 node -v 即可看見 node 版本。
安裝webpack
npm install webpack -g安裝好之後我們先建立一個資料夾叫 website 好了
mkdir website && cd website然後我們先建立1個html檔在根目錄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content">content</div>
</body>
</html>當然，此時你已經可以直接點擊 index.html 兩次來開啟它了。
但是你可以看見，它是以 file:// 來開啟，並非以 http:// 開啟，這樣一來你就無法做其他裝置的連線測試。
接著，我們建立一個 server.js 檔
touch server.js裡面暫時先不用寫東西
然後我們需要建立一個 package.json 檔
npm init沒有什麼特別需要寫的就一直 enter 下去就可以了。
package.json 負責幫我們記錄專案裡我們使用了哪些 node packages，類似一個套件索引檔。它的內容大概長這樣：
然後我們可以使用 npm 來安裝套件，第一個要灌的就是node 常用的網頁伺服器 express：
安裝 Express
npm install express --save-devinstall 也可以簡寫成 i
npm i express --save-dev然後你可以看到你的 package.json 會多了一個 devDependencies 區塊：
然後你可以看見 devDependencies 裡面有一個 express, 如果再繼續裝，它就會繼續在 devDependencies 新增。
特別說明：
如果沒有使用 --save-dev 這個參數，不會更新 package.json，只會默默的幫你在專案裡新增 node_modules 這個資料夾，並且把你的套件放進去。除了 --save-dev 之外，還有 --save 可以使用，兩者的差別在於：
--save-dev：用來安裝開發時用的工具
--save：用於上線時必要的套件比方說 express 這就是我們開發時會用到的臨時伺服器，應該使用 --save-dev
而 jquery, react ... 等，是上線必備的套件，應該使用 --save通常我們把把專案傳到 github 時，不會上傳套件（因為網路上有），只會上傳 package.json，然後看 package.json 裡有什麼 Dependencies(上線依賴) 與 devDependencies(開發依賴) 套件，再下載下來。所以通常把專案 pull 到開發環境，你會使用 npm i 來安裝所有的依賴套件。
但如果 pull 到正式環境，你會使用 npm i --production 來安裝 Dependencies(上線依賴)的套件。
安裝專案用 webpack
npm i --save-dev webpack安裝用之後你的 package.json 應該會長這樣：
修改 server.js
請把 server.js 修改成這樣：
require webpack 稍後我會說明，require express 就是建立一個暫時用的伺服器，建好後設定路由「/」 會回傳 index.html 檔。然後 listen 在 3000 port, host 開在 0.0.0.0。接著到 termianl 下：
node server.js可以看到這個畫面：
然後打開 http://0.0.0.0:3000/ 就可以看見我們剛剛定義的 index.html 了~
特別說明：使用 0.0.0.0 這個 host 有個好處，就是你可以使用 localhost 或是 [內部ip] 來瀏覽你的專案，所以你可以打 http://localhost:3000/ 或是 http://內部ip:3000/ 來查看。
既然我們有內部ip，就意味著可以使用同個網域下的其他裝置來瀏覽你電腦裡的專案！安裝 webpack-dev-middleware 與webpack-hot-middleware
webpack-dev-middleware 可以幫我們在 express 下建立 webpack-dev-server 中介層，你可以給它一些 webpack-dev-server 參數，比方說 noInfo: false, 那你在 terminal 啟動它時就不會 console.log 東西。
webpack-hot-middleware 則可以幫我們免重整來更新存檔的檔案用（等下你就知道了）
npm i --save-dev webpack-dev-middleware webpack-hot-middleware然後要更新一下 server.js
安裝 babel-loader 與 babel-preset-react
因為我們會使用 ES6(下一代的JavaScript) 語法，所以我們需要安裝 babel-loader、babel-core、babel-preset-es2015、 還有 babel-preset-react(轉碼規則) , 然後在 webpack 裡幫我們轉換。
npm i --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015安裝 React
等下我們要寫 react，所以要安裝 react 跟 react-dom
npm i --save react react-dom建立 webpack.hot.config.js 在專案根目錄
這邊有很多東西其實我也不太懂，但這邊就以我知道的說明一下：
- entry 屬性設定 js 的進入點，屬性為 object，每個進入點需設定來源，以本次案例來說，我的 entry 裡面有 app 進入點，它的來源有2：一是hot-middleware，另一個是等下我們要建立的 /components/app.js 。之後我們就可以使用 [publicPath]/app.js 來存取這個app進入點。
- output 屬性用來設定存取進入點的資訊，也是要打包時輸出的位置。path是設定進入點的來源base路徑，filename指的是進入點打包的後的檔名，可以使用 “bundle.js” 把所有進入點js打成一包，或是像此案例使用 “[name].js” 讓每個進入點各自一包。 publicPath 是設定<script src..>要存取它時的路徑。像以此例，我們到時就可以使用 http://localhost:3000/static/app.js 來存取它。
- module 屬性設定遇到什麼檔案時，要使用什麼 loader 去轉換它。在此例中，我們遇到 js 時，會使用 babel-loader 去讀取它，好讓webpack看得懂 es6 語法， __dirname(此專案根目錄) 裡的每個 js 都要用 babel-loader, 除了 /node_modules/ 裡的除外。
設定.babelrc檔
剛剛安裝的 babel-preset-es2015 跟 babel-preset-react 就在這個檔裡被使用，但老實說我並不明白為什麼要設定它們才可以跑。內容如下：
建立 /components/app.js
其中的 ReactDOM 則是幫我們把 React 的 App Component 渲染到 #content 這個 div 的工具。而 module.hot 如果支援的話，則開啟熱渲染模式（存檔即改變，不用重整）。
特別注意：如果你沒有使用 babel-loader, babel-preset-react, 這種HTML與JS混著用的檔案webpack可是不認得的。(會出錯)幫index.html 安插js進入點。
好了，到目前為止，我們的檔已經設定的差不多了，把 node server.js 先按 ctrl + c 關掉。
在 package.json 加上 scripts > start
打開 package.json 看一下 devDependencies (開發依賴) 與 dependencies (上線依賴) 應該會像這樣，然後我們在 scripts 屬性加入一個 start 命令。
所以我們之後只要輸入：
npm run start就等同於使用
node server.js好，接著我們啟動 npm run start, 然後看一下。
接著我們修改一下 /components/app.js
接著你就可以看見不在重整的情況下，它也會修改內容了！
建立 Header, Content, Footer
然後在 app.js 引用它們：
存檔後看看瀏覽器：
如果你修改了被 app 引用的 Header.js：
如此一來，我們就可以開始開發我們的 React 程式了~
