從無到有建立 webpack 設定檔（三）進階設定

老話一句，如果你沒看過上一篇的話，請先看完上一篇再來：

從無到有建立 webpack 設定檔（二）設定樣式

上一篇我們已經為 開發階段 與 產品階段 設定了不同的 webpack.config，如果你有仔細實作的話，你會發現它們有一些共同處，所以我們可以把這些共同處獨立出來！

建立 webpack.base.config.js

把檔案共同處獨立出 webpack.base.config.js 之後，接下來就可以簡化 原本的 hot 與 prod 檔案：

簡化 hot 檔

如圖所示把 base 檔讀進來變成一個 object 然後再對 config 做 push 內容，最後把再 config exports 出去~ (記得這些邊的設定會跟 prod 不同）

簡化 prod 檔

prod 檔一樣要載入 base 檔，要特別注意下面的 ExtractText.extract 這邊 css?modules 一定要寫！（這樣打包時才會解譯css到你的 DOM裡）

重新測試你的 hot 與 prod

npm run start #開發用
npm run prod #打包上線用

如果是打包的話，它會產生一堆檔案在 static 資料夾

然後這些檔再把它們引入你的 頁面就可以囉~

最後附上檔案

sexyoung/webpack-junior-guide

文章引用：
http://alexfedoseev.com/post/66/webpack-declarative-way