Webpack基礎概念

這是我參與8月更文挑戰的第6天，活動詳情查看：8月更文挑戰

webpack是什麼？有什麼做用？

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。

它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊，好比 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

Webpack 是一個靜態模塊打包器。webpack在打包的時候，他會從入口開始，根據模塊的依賴關係進行靜態分析，遞歸地構建一個依賴圖，其中包含應用程序對應的一個或多個模塊，而後將它們打包成一個或多個 bundle.js

做用：

• 1.將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源
• 2.將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載
• 3.經過 loader 的轉換，任何形式的資源均可以視做模塊

1. webpack的核心概念

entry (入口)

入口(Entry)指示 webpack 以哪一個文件爲入口起點開始打包，分析構建內部依賴圖。

output (出口)

輸出(Output)指示 webpack 打包後的資源 bundles 輸出到哪裏去，以及如何命名。

loader

Loader 讓 webpack 能 夠 去 處 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)。

plugins (插件)

插件(Plugins)能夠用於執行範圍更廣的任務。插件的範圍包括，從打包優化和壓縮， 一直到從新定義環境中的變量等。

mode (模式)

模式(Mode)指示 webpack 使用相應模式的配置。

選項	描述	特色
development	會將 DefinePlugin 中 process.env.NODE_ENV 的值設置 爲 development。啓用 NamedChunksPlugin 和 NamedModulesPlugin。	能讓代碼本地調試 運行的環境
production	會將 DefinePlugin 中 process.env.NODE_ENV 的值設置 爲 production。啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin。	能讓代碼優化上線 運行的環境

依賴圖(dependency graph)是什麼？

從 入口開始，webpack 會遞歸的構建一個 *依賴關係圖*，這個依賴圖包含着應用程序中所需的每一個模塊，而後將全部模塊打包爲少許的 bundle。

2. webapck執行流程

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

• 初始化參數：從配置文件和 Shell 語句中讀取與合併參數，得出最終的參數
• 開始編譯：用上一步獲得的參數初始化 Compiler 對象，加載全部配置的插件，執行對象的 run 方法開始執行編譯
• 肯定入口：根據配置中的 entry 找出全部的入口文件
• 編譯模塊：從入口文件出發，調用全部配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到全部入口依賴的文件都通過了本步驟的處理
• 完成模塊編譯：在通過第4步使用 Loader 翻譯完全部模塊後，獲得了每一個模塊被翻譯後的最終內容以及它們之間的依賴關係
• 輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的 Chunk，再把每一個 Chunk 轉換成一個單獨的文件加入到輸出列表，這步是能夠修改輸出內容的最後機會
• 輸出完成：在肯定好輸出內容後，根據配置肯定輸出的路徑和文件名，把文件內容寫入到文件系統

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

簡單說

• 初始化：啓動構建，讀取與合併配置參數，加載 Plugin，實例化 Compiler
• 編譯：從 Entry 出發，針對每一個 Module 串行調用對應的 Loader 去翻譯文件的內容，再找到該 Module 依賴的 Module，遞歸地進行編譯處理
• 輸出：將編譯後的 Module 組合成 Chunk，將 Chunk 轉換成文件，輸出到文件系統中

3. Loader和Plugin的區別

Loader 本質就是一個函數，在該函數中對接收到的內容進行轉換，返回轉換後的結果。 由於 Webpack 只認識 JavaScript，因此 Loader 就成了翻譯官，對其餘類型的資源進行轉譯的預處理工做。

Plugin 就是插件，基於事件流框架 Tapable，插件能夠擴展 Webpack 的功能，在 Webpack 運行的生命週期中會廣播出許多事件，Plugin 能夠監聽這些事件，在合適的時機經過 Webpack 提供的 API 改變輸出結果。

Loader 在 module.rules 中配置，做爲模塊的解析規則，類型爲數組。每一項都是一個 Object，內部包含了 test(類型文件)、loader、options (參數)等屬性。

Plugin 在 plugins 中單獨配置，類型爲數組，每一項是一個 Plugin 的實例，參數都經過構造函數傳入。

參考

juejin.cn/post/684490… juejin.cn/post/684490…