webpack心得總結

MrXu_發表於2018-07-08

如無意外，每週更新時間為週日

1.webpack的好用之處

我對學習webpack的起因很簡單，因為它夠潮，而我恰恰喜歡潮的東西。我之前也瞭解過webpack，但是僅僅是侷限於他的使用方法，能夠看懂他的配置檔案。而我這次對他的用處有了更深的瞭解。

①輕鬆使用es6
首先從es6說起吧，瀏覽器對es6的支援度並不高。僅僅實現了其中的一部分而已，但是es6的實用性以及好用性是不用質疑的。從某些方面來說他不僅僅是對之前版本的一次擴充套件，更是對之前版本的一個修復。

//寫法1：
var hi = function () { this.name = 'MrXu' }
hi()
console.log(name) // MrXu
//寫法2：
var hi = () => { this.name = 'MrXu' }
hi()
console.log(name) // 報錯
123456789複製程式碼

上面只是es6新增加功能中的箭頭函式，他阻止了函式提升，讓程式碼呼叫能夠按照呼叫順序來。想要全面系統的瞭解可以看阮一峰寫的那本es6的書，裡面寫了如何使用es5實現es6的某些方法，以及es6新的語法使用場景，挺不錯的（看書連結戳我）

說了這麼多都是為了跟webpack扯上關係的，webpack可以在瀏覽器不支援es6語法的情況下讓你使用es6語法。這樣你就可以邊看邊使用了。現在的webpack版本整合度很高，省掉了很多的配置，現在能夠能夠直接編譯es6語法，像之前的版本都需要自己加入babel載入器才可以打包es6，現在真是方便了很多。並且加入了中文翻譯，看起來更加的方便

②壓縮檔案都交給計算機
我是一個比較喜歡追求完美的人，但有時候因為懶就退而求其次了。就好比完整獨立的JS程式碼，應該壓縮一下才是最好的。因為這樣不僅保證了你的原始碼不至於暴露無疑，也能保證更下的體積，從而提高瀏覽器載入效率。但是誰願意每次都手動找壓縮工具壓縮一下呢，像這種重複的勞動實現自動化實在合適不過了，而webpack就能夠輕鬆實現幫助你打包

③程式碼改了，可是瀏覽器沒有出來效果。怎麼回事？
這種情況說實在的真的挺煩人的，不管你是新手還是老手也總不可能第一時間就想到原來是瀏覽器快取。等發現真相的時候都有一種吐血的衝動，防止瀏覽器快取方法還是挺多的，
1.例如你給瀏覽器設定成不快取檔案的配置，但是這樣對於大多數人都不理想，很多人都想記住密碼不想有些網站老是二次輸入，
2.還有一種就是在載入檔案的時候修改檔名或者是加時間戳，從而達到讓瀏覽器重現載入。我估計一個大的JS檔案可能要看好幾十次還不止，改好幾十次你有這個耐心麼
上面倆種方法大部分人都不一定回去真的做，有了webpack你可以輕鬆實現方法二，並且連重新整理瀏覽器都剩下了。輕鬆簡單加愉快

③減少介面請求數量
有許多圖片圖示都是放到一張圖片上的，這麼做的原因就是因為能夠減少圖片體積，減少頻寬，同樣的將JS，css檔案打包成一個也能夠減少體積使得介面載入的更快

④頂級應用，spa模式
我個人認為打包帶來的最大的好處就是誕生了SPA模式（single page application 單頁面應用）。

以上這四種算是比較常見的使用了，你也可以自己寫載入器為自己實現定製化打包，好處多多

⑤webpack可以這樣學習
開啟webpack官方文件戳我

1.第一步單擊文件進入文件資料介面（英文不好的請選擇最右邊的語言選擇，選擇中文）

2.根據指南進行做小例子
我剛開始看webpack的時候先看的概念，這對於大多數人來說是很枯燥乏味的，容易失去學習的信心，但是先做小例子就不一樣了。做東西不僅能夠給你實時的反饋，增加你的參與感和認同感。而且例子裡面涉及到的都是你用的特別多的東西。個人感覺例子做出來的東西基本上能夠滿足你80%的需求
3.做完了例子在做知識補充
這個時候你就可以看loaders,外掛，API了。也不用看的太過於具體，只需要一覽標題即可，因為這個時候你還不需要用他們做一個具體的東西，看的太多反而不好。
4.是時候讀概念了
搞完了上面這些，你趕緊自己已經無所不能了，但是有一種飄飄然的感覺。那是因為你沒有找到根，總是在跟著別人走，有些牽制於人。當你有這種感覺得時候來看看概念你不僅不會太乏味（乏味依然是有的，就像上政治課一樣，但是你現在是一個有追求的人了。所以不會太乏味），而且會收貨頗豐