Webpack框架（掌握核心技術）

webpack 是一個現代 JavaScript 應用程式的模組打包器(module bundler)。這篇文章主要介紹了Webpack框架核心概念(知識點整理),需要的朋友可以參考下

#webpack是什麼

##webpack是一個前端建構的打包工具（並不是什麼函式庫或框架）， 它能把各種資源，例如JS（含JSX）、coffee、css（含less/sass）、圖片等都當作模組來處理和使用。

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/。

以上就是我整理的文字，希望對大家有幫助

相關文章:

在JS中如何實現十字座標跟隨滑鼠效果

使用Angular4有關圖片路徑不安全的問題

在Webpack中如何建構Electron應用

在Webpack中有關最佳化配置問題

在jQuery中如何實現為清單動態新增

#在jQuery如何實作線上客服功能

在Vue中如何實作進入/離開動畫

在node.js中有關路由，中間件的詳細介紹說明

使用Angular如何實作基本購物車功能

在React中詳細介紹受控元件與非受控元件

使用vue實作簡單鍵盤操作

以上是Webpack框架（掌握核心技術）的詳細內容。更多資訊請關注PHP中文網其他相關文章！