Webpack框架使用總結

這次帶給大家Webpack框架使用總結，Web​​pack框架使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

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 中

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

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

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue-cli webpack怎麼搭建vue開發環境

vue2-webpack2的框架怎麼搭建

以上是Webpack框架使用總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！