從無到有建立 webpack 設定檔（二）設定樣式
如果你還沒看過第一篇，請到這邊
這篇主要以scss當作樣式檔做開發，跟樣式相關的像是字型檔、圖片檔也會一拼在此篇一起說明。
安裝樣式loaders
npm i --save-dev style-loader css-loader sass-loader autoprefixer-loader file-loader url-loaderstyle-loader、css-loader、sass-loader這一系列的loader，就是讓我們可以讀取 css, sass 用的。而 autoprefixer 則是自動產生各種瀏覽器專用的語法，就像這樣：
border-radius: 3px; /* 寫的時候寫這樣 *//* 它會幫我們自動轉成這樣 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
而 file-loader 則是用來讀取字型檔、圖片檔用的。最後 url-loader 可以幫我們偵測如果 woff(2) 這些來源如果在多少大小以內，就幫轉成base64（減少 request）
特別說明：如果安裝 sass-loader 不成功，你可能需要先安裝 node-sass
npm i --save-dev node-sass修改 webpack.hot.config.js
就在 module 裡面多加幾個 loader
新增 styles
新增 /components/app.scss 並修改 /components/app.js
接著重新啟動你的 webpack，你可以看到瀏覽器
以此類推，其他的Components：Header, Content, Footer 也都使用這樣的方式就可以設定樣式了~
咦？好像怪怪的？
你可能已經發現，你的 index.html 並沒有戴入樣式檔，為什麼可以顯示呢？因為在開發狀態中，webpack 會把你的樣式動態的產生出來（用javascript產的）所以並不會產生新的檔案，而是直接append在 index.html 的 head 裡哦。
那上線的話，還是這樣嗎？
當然不是，上線的話我們就要把scss轉成css，react檔轉成js，所以我們要使用另一個上線專用的 webpack 設定檔：
安裝 extract-text-webpack-plugin
npm i --save-dev extract-text-webpack-plugin建立 webpack.prod.config.js
這裡要注意的是 vendor 部分，因為我們的 app, Header, Content, Footer 都有 import React, 但打包的時候總不能每一個 component 都把 React 包進來，這樣就會包4次 React, 所以我們多定義一個進入點：vendor，內容為 [‘react’, ‘react-dom’] ，並在使用 CommonsChunkPlugin 幫我們把 React, React-DOM 抽出來。還有 test: /\.scss$/ 那邊，也使用了 ExtractText.extract 來幫我們把sass 抓出來轉成 css。
新增 npm run prod 指令
所以我們之後只要下：
npm run prod它就會幫我們產出這些相關檔案了~
