詳解Webpack框架核心概念

webpack是一個前端建構的打包工具（並不是什麼函式庫或框架）， 它能把各種資源，例如JS（含JSX）、coffee、css（含less/sass）、圖片等都當作模組來處理和使用。這篇文章主要介紹了Webpack框架核心概念(知識點整理),需要的朋友可以參考下，希望能幫助到大家。

1.基礎知識點

　　1.1 webpack 是一個現代JavaScript 應用程式的模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞歸地建立一個依賴關係圖(dependency graph)，其中包含應用程式所需的每個模組，然後將所有這些模組打包成一個或多個 bundle。

　　1.2webpack的四個核心概念：

　　　　1.2.1 entry(入口)：entry point,入口起點（可以有多個），webpack會從這個起點出發，找出哪些文件時入口文件所依賴的，從而建立內部依賴關係圖，並處理後輸出到稱為bundles的文件中

　　　　1.2.2 output(輸出)：指定經entry point處理後的bundles文件的輸出路徑（path）與名字（filename）　　　　

　　　　1.2.3 loader(載入器):用來處理非JS文件，可以將所有文件轉換成webpack可以處理的模組，然後交給webpack進行打包等處理；webpack loader 本質上講是將所有類型的檔案轉換為應用程式的依賴圖可以直接引用的模組，其有兩個目標：

　　　　　　1.2.3.1 使用test屬性，識別出對應於loader 的可轉換檔案

　　　　　　1.2.3.2 使用use屬性將這些檔案轉換，使其被新增至依賴圖中，並且最終會新增至bundle 中

　　　　　配置中定義loader ，要在module.rules 中定義，而不是rules

　　　　1.2.4 plugins(插件)：從打包優化和壓縮，一直到重新定義環境中的變數。插件介面功能極為強大，可以處理各種各樣的任務

　　　　　　使用一個插件只需要 require() 它，然後把它添加到 plugins 數組中就行。多數插件可以透過選項(option)自訂。你也可以在一個設定檔中因為不同目的而多次使用同一個插件，這時需要透過使用 new 操作符來建立它的一個實例。

　　　　　　webpack 提供許多開箱可用的插件！查閱插件列表以獲取更多信息，更詳細的圖文請參閱官方文件 https://doc.webpack-china.org/concepts/。

相關推薦：

webpack+express多頁網站開發實例詳解

Electron建置React、Webpack桌面應用教學

webpack學習教學之前端效能最佳化總結

以上是詳解Webpack框架核心概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！