上一篇文章中，筆者對webpack這個當下比較流行的模組載入器兼打包工具做了一些簡單的介紹和筆者目前的使用場景，說句題外話，在這裡，筆者並不想以一種什麼一個小時，一週精通webpack的視角去撰寫這樣一種工具該如何運用自如，我也木有把這個工具玩明白，不過筆者更多的想以自己當下正在使用這個工具的感受和小小的經驗去體現使用這樣一款工具的優勢和對工程的好處，未必寫得出深入淺出的感覺，不過仁者見仁，智者見智，各位看官各取所需吧~

在這裡筆者主要想說以下幾點：

1.webpack-dev-server配置

2.webpack配合webpack-dev-server的使用

3.筆者使用webpack時，常用的一些plugin

對於webpack來說，如何載入，解析，管理不同的包，配置檔案的撰寫顯得尤為重要。

在筆者的工程中，為了適配不同的執行環境，筆者為webpack的打包分別提供了不同的配置檔案，在筆者的工程中是這樣的：

這裡一共有4個配置檔案，其中三個是針對不同的的環境的
還有一個是筆者本地開發時，使用到了webpack-dev-server來自定義中轉伺服器的配置，這個在後面會說到
三個環境的配置檔案中的內容其實大致一樣，不同的是：
1.配置檔案中新增哪些內容能夠讓開發者在本地環境和測試環境能夠更方便開發和除錯
2.配置檔案中新增哪些內容能夠提供更好的壓縮率和模版更優的配置

那麼既然說到了壓縮率，筆者想要給大家簡單的說下筆者用到一些plugin：

這是筆者生產環境是配置截圖：

其中：

1.DefinePlugin：這裡能夠接受字串並且插入到程式碼中，這樣使用者就能夠把這裡插入的內容當成全域性變數去指定程式去載入不同的內容：
比如：

2.HtmlWebpackPlugin：這個外掛能夠幫助你自動生成你需要部署的html檔案，尤其是在你的應用可能會有多個不同的入口檔案，並且不同的入口檔案需要包含不同的打包好的靜態檔案時，尤為方便，你可以在該外掛中去配置，你需要編譯的模版檔案、模版檔案中需要包含哪些塊（chunk），這些靜態檔案又應該插入到模版檔案的什麼位置，另外在筆者使用的檔案中，還用到了minify這個配置：
也就是在壓縮html檔案的過程中，使用html-minifier對需要編譯的html模版做哪些操作，其中我主要用到了以下三個配置：
removeComments，移除html中的註釋，增加檔案的不可讀性
collapseWhitespace：刪除換行符和空白符，增加檔案的不可讀性
removeAttributeQuotes：在安全的情況下移除屬性值的引號
這裡是屬性值的字典：
https://github.com/kangax/html-minifier#options-quick-reference

3.OccurenceOrderPlugin
由於入口檔案對於檔案大小有較高的優先順序，因此該plugin能夠根據對比分塊的id的使用頻率得出最短的id分配給使用頻率高的模組，從而提高入口檔案的壓縮優化率

4.UglifyJsPlugin
webpack的內建外掛，專門用於壓縮程式碼
這裡我關閉了壓縮程式碼時的警告資訊

5.CommonsChunkPlugin
公用的模組分開打包，不和入口檔案一起打包，從而提高程式碼的壓縮率

另一方面

筆者在開發過程中使用到了webpack-dev-server這個工具，這是一個輕量的node.js express伺服器，webpack-dev-server有個很實用的功能叫做熱替換，開發過程中不需要重新整理瀏覽器，任何前端程式碼的更改都會實時的在瀏覽器中表現出來，不過該server的不能替代後端的伺服器，如果有需要進行後端開發，就需要採用雙伺服器的模式，一個後端伺服器和一個資源伺服器（即Webpack-dev-server)
配置雙伺服器熱替換模式首先需要修改Wepack.config.js的entry條目：

我們需要在在Plugins中增加
new webpack.HotModuleReplacementPlugin()

不過，在這裡，我們需要注意，採用雙伺服器模式開發的時候，我們很有可能會遇到跨域的問題，這時，我們可以通過一下幾種方式去解決跨域的問題：
1.使用document.domain
2.配置諸如nginx的代理伺服器來轉發請求
3.配置諸如fiddler等抓包工具來轉發請求
4.使用nodejs編寫中轉伺服器

不過，webpack-dev-server本身就提供了這種配置來解決跨域的問題，這裡採用node的方式來建立較為靈活的自定義server來轉發請求
其中inline模式有兩種方式：命令列方式和Node.js API
1) 命令列方式比較簡單，只需加入--line選項即可。例如：

webpack-dev-server --inline

使用--inline選項會自動把webpack-dev-server客戶端加到webpack的入口檔案配置中。

在這裡：

changeOrigin：在請求頭中新增host
secure：是否需要驗證https

配置詳情：

https://github.com/chimurai/http-proxy-middleware#options

最後給大家看下筆者線上的程式碼打包後的大小：

所以，真的，很小吧~

以上內容，大神們不免會有嫌棄，畢竟僅僅是淺談筆者目前專案中開發用到的一點點技術和筆者自己一點點的積累，有啥問題也請大神們指點指點，畢竟筆者也還是個孩子，孩子的郵箱還是那個郵箱：

[email protected]

最後坦白來說，想寫的東西有很多，想研究的東西有很多，想說的廢話也有很多，嘿嘿，不過畢竟細水長流嘛，筆者也會繼續默默的學習，默默的更新部落格，儘管路不好走，但還得走啊！