webpack心得總結

如無心外，每週更新時間爲週日

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.是時候讀概念了
搞完了上面這些，你趕忙本身已經無所不能了，可是有一種飄飄然的感受。那是由於你沒有找到根，老是在跟着別人走，有些牽制於人。當你有這種感受得時候來看看概念你不只不會太乏味（乏味依然是有的，就像上政治課同樣，可是你如今是一個有追求的人了。因此不會太乏味），並且會收貨頗豐

2.網易雲的即時通信

即時通信的涉獵領域是很是廣的，電商，醫療，畜牧等等各個行業都會想去弄一個即時通信的功能，及時的跟客戶溝通是增長客戶粘性的一個很是好的方式。在這裏之因此說網易雲的，得益於公司使用了網易雲的即時通信產品。

我以前還用過layui的即時通信，這個跟網易雲的比起來真的是小屋見大巫了。網易的不只提供了web端的，PC端的，安卓，蘋果，h5各個端的都有。並且開發者只須要對接上用戶信息便可快速使用，很是方便。

我這裏也整理了倆篇網易雲即時通信的使用心得：
網易即時通信心得體會（1）
網易即時通信心得體會（2）

3.免費的講解Promise使用的視頻，有不少奇淫技巧

要視頻網址戳這裏

Promise這個功能在node開發中是很是重要的，若是你以爲你還不知道他應該怎麼用，能夠看看這個視頻，視頻是擁有11年開發經驗的老前輩作的，頗有質量。

4.阿里出的一本免費的書，《不止代碼》

關注《阿里技術》公衆號回覆代碼便可得到下載電子版連接，裏面總結了阿里最近發佈的優秀的文章，都是很體系化的，對於擴展頗有意義。

5.如何在gitHub上發佈我的項目，而且生成網站總之包含了不少github建立項目的技巧和心得

視頻地址戳這裏

作視頻的人自己就在github上有成熟的項目」wangEdit」,star的數量好幾千，做者按期維護。他將本人的經驗融入進了視頻裏，告訴你們如何從零作一個前段開源項目，須要注意什麼，以及如何宣傳和維護

往期文章：
深刻前端學習原來這麼有趣 第1期

想要第一時間看的個人文章能夠關注個人公衆號」吵吵日記」，或者是掃描下方二維碼