Webpack入門（1）- 圖解"webpack是什麼"

前言

毫無疑問，Webpack在前端中有着獨特的重要性，是你必需要熟悉的一個技能點。由於你在投簡歷瀏覽一些大公司的前端崗位時，Webpack毫無疑問是寫明瞭至少要是熟悉Webpack。我在學Webpack期間，經常被它的配置，環境給繞暈了,如今從新開始學一遍，但願我能夠掌握它。本着分享學習的態度，記錄下我學習的過程，但願能夠對一些初學Webpack的同窗提供一點幫助。

Webpack使用緣由和定義

我相信不少剛開始學Webpack的同窗在學以前必定瘋狂的在各大論壇或者百度搜索「什麼是Webpack」，由於我就是這麼幹的。可是一些大牛的文章在說起什麼是Webpack的時候老是一筆帶過，看完以後也是雲裏霧裏，迷迷糊糊。如今我用本身的語言來解釋什麼是Webpack。在此以前，還要向你們解釋爲何要使用Webpack:

爲何要使用Webpack

咱們都知道一個大公司的網站每每作的都很炫酷，美觀，功能很齊全。在這背後前端工程師花了很大的精力去作優化什麼的。大型網站和大型項目中的背後都擁有着複雜的JS代碼和不少依賴。爲了簡化開發的複雜度，每每對程序切割分裂爲不一樣的模塊。

如圖所示，把大型項目切割成不少不一樣的模塊。那麼，裏面的箭頭是怎麼回事，我以爲能夠理解爲 require。由於兩個文件之間相互通聯是靠 require鏈接的。比如如， html文件利用 link中引入樣式同樣。 webpack整合了項目裏的模塊打包的更爲精簡。因此咱們須要 webpack。

• Webpack分析大型項目的結構
• 找到JS模塊以及瀏覽器不能直接運行的模塊(cjs,Sass,hbs等等)
• 將瀏覽器不能直接處理的文件轉換和打包爲合適的格式供瀏覽器直接處理。
• 這樣前端工程師既能夠更輕鬆系統的開發，瀏覽器也能更高效流暢的運行。

什麼是Webpack

上面已經提到了 Webpack的工做流程，我在舉一個 不怎麼嚴謹的例子大家也許就能明白。
假如你去飯店吃飯，點完菜後你以爲把菜打包回寢室吃更爽一些。你點了不少菜，這些菜有麻辣的，酸辣的，甜的，還有水果，小糕點不一樣的口味。考慮到你的室友有的喜歡吃辣的，有的喜歡吃甜的，有的喜歡吃水果。若是所有的菜混在一塊兒可能室友都不喜歡，你決定不混在一塊兒，而是按照口味混在一塊兒。把辣的菜混到一塊兒，把甜的菜混到一塊兒，把水果混到一塊兒。這樣你的室友就可以接受了。

結合上面webpack的工做流程，能夠這樣說：webpack分析大型項目的結構即分析這些菜是哪些口味；找到瀏覽器不能直接運行的模塊，即分析哪些是你室友不能接受的口味；將瀏覽器不能直接處理的文件轉換和打包爲合適的格式供瀏覽器處理即將菜分類打包讓你的室友能夠接受。 結合上面的圖，應該把Webpack的運行流程搞清楚了。

webpack工做流程

用文字敘述不直觀，我儘可能用圖形的方式來講明。首先先說明依賴就是本文第一張圖裏面的箭頭。

未完待續...

歡迎訪問個人博客，會分享一些技術文章，一塊兒學習前端。