認識webpack原理-萬物皆可打包

Webpack早已成爲前端開發者必備技能之一，本文從webpack的原理、打包流程以及webpack優化進行分析。webpack配置的文章在網上已經數不勝數了，本文就不做闡述啦。有問題的小夥伴歡迎留言指正~

Webpack核心原理:

Webpack把一切都看成模塊，當webpack處理應用程序時，根據給定的一個主文件，遞歸的構建一個關係依賴圖。其中包含應用程序須要的每個模塊，而後把這些模塊打包成一個或多個包。

bundle、chunk、module是什麼

• bundle:是由webpack打包出來的文件
• chunk:代碼塊，一個chunk由多個模塊組成，用於代碼的合併與切割
• module:是開發中的單個模塊，在webpack的世界中，一切皆模塊，要給模塊對應一個文件，webpack會從配置的entry中遞歸開始查找出全部依賴的模塊

何爲loader和plugin

Loader: Webpack把一切文件都視爲模塊，可是原生的js只能解析js文件，若是其它文件格式也想打包的話就須要用到loader。因此loader的做用是使webpack擁有了加載和解析非javascript的能力。它也能實現對不一樣格式的文件處理，好比將scss轉換成css、Typescript轉換成js。轉換這些文件，從而使其可以被添加到依賴圖中。

Plugin : 用來擴展webpack的功能，讓webpack擁有更多的靈活性。它並非直接操做單個文件，而是直接對整個構建過程起做用。在Webpack運行的生命週期中會廣播出許多事件，Plugin 能夠監聽這些事件，使用自身豐富的Api控制 webpack 打包流程的每一個環節，實現對 webpack 的自定義功能擴展。

區別總結 : loader實現對不一樣格式文件的處理，轉換這些文件，使其能夠被添加到依賴圖當中。plugin是用來擴展webpack的功能，不是直接操做文件。它由豐富的自定義api和生命週期事件，從而控制webpack打包流程的每一個環節。這是loader作不到的。

Webpack的構建流程

Webpack的運行過程是個串行的過程，從啓動到結束會依次執行如下流程：

1. 初始化參數:從配置文件和shell語句中讀取與合併參數，得出最終參數。
2. 開始編譯:用獲得的參數初始化compiler對象，加載全部配置的插件，執行對象的Run方法開始編譯。
3. 肯定入口:根據配置中的entry找出全部入口文件。
4. 編譯模塊:從入口文件出發，調用全部配置的loader對模塊進行翻譯，再找出該模塊所依賴的模塊，再遞歸本步驟。直到全部入口依賴文件都通過了本步驟的處理。（此處爲深度優先遍歷）
5. 完成模板編譯:使用loader翻譯完全部模塊後，獲得每一個模塊被翻譯後的最終內容，以及它們之間的依賴關係。
6. 輸出資源:根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的chunk，再把每一個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是能夠修改輸出內容的最後機會。
7. 輸出完成：在肯定好輸出內容後，根據配置肯定輸出的路徑和文件名，把文件內容寫入到文件系統。

在以上過程當中，Webpack 會在特定的時間點廣播出特定的事件，插件在監聽到感興趣的事件後會執行特定的邏輯，而且插件能夠調用 Webpack 提供的 API 改變 Webpack 的運行結果。

如何用webpack來優化前端性能

1. 壓縮代碼:刪除多餘代碼，註釋，簡化代碼寫法等方式。能夠利用webpack的uglifyjsplugin來壓縮JS文件， 利用cssnano（css-loader?minimize）來壓縮css。
2. 利用CDN加速:在構建過程當中，把引用的靜態資源路徑修改成CDN上的對應路徑。能夠利用webpack的output參數和loader的publicPath參數來修改資源路徑
3. Tree shaking:將代碼中永遠不會用到的片斷刪除掉，能夠在啓動Webpack的時候追加參數--optimize--minimize來實現
4. Code splitting: 將代碼按路由或組件進行分塊，這樣能夠作到按需加載，同時能夠充分利用瀏覽器緩存。

小結：

正確理解webpack背後的原理與基本知識，能夠幫助咱們更好的使用webpack這一利器。但願看了本文的盆友能夠對webpack能夠有個更深刻的認識，使用起來更加駕輕就熟。