首頁 > 文章 > web前端 > react和webpack的差別是什麼

react和webpack的差別是什麼

區別：1、React是一個JavaScript框架，而webpack是一個JavaScript應用程式的靜態模組打包器；2、React主要用於建立使用者介面，而webpack可以進行重新載入編譯，可將所有的靜態資源都合併，進而減少io請求。

react和webpack的差別是什麼

本教學操作環境：Windows7系統、react17.0.1版、Dell G3電腦。

react是什麼

#React是用來建立使用者介面的JavaScript框架。

框架：可以重複使用的程式碼。用的人多了，就出名了，越有人越有價值。（笑）

與React齊名的Angular。

React是用來渲染UI的JS函式庫，定位在與實作UI

React Web App解決方案，衍生的React Native是跨螢幕App解決方案

特點：

為什麼使用React?

傳統方法頻繁地操作DOM，效能無法達到要求；React使用VDOM，效能高

傳統JS程式碼維護成本高，React基於元件開發

需要支援行動端開發

#React的缺點：

webpack是什麼

本質上，

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

webpack 就像一條生產線,要經過一系列處理流程後才能將原始檔轉換成輸出結果。這條生產線上的每個處理流程的職責都是單一的,多個流程之間有存在依賴關係,只有完成當前處理後才能交給下一個流程去處理。插件就像是一個插入到生產線中的一個功能,在特定的時機對生產線上的資源做處理。

webpack 透過 Tapable 來組織這條複雜的生產線。 webpack 在運作過程中會廣播事件,插件只需要監聽它所關心的事件,就能加入到這條生產線中,去改變生產線的運作。 webpack 的事件流機制保證了外掛程式的有序性,使得整個系統擴充性很好。

webpack 建置流程

Webpack 的運作流程是一個串列的過程,從啟動到結束會依序執行下列流程:

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

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

react和webpack的區別

#React是一個JavaScript框架，是用來渲染UI的JS函式庫，用來建立使用者介面。

而webpack是一個打包器（bundler），它能將多個js文件打包成一個文件（其實不只可以打包js文件，也能打包其他類型的文件，例如css文件，json文件等）。

webpack的作用

進行重新載入編譯。實際上就是將瀏覽器不認識的語法編譯成瀏覽器認識的語法。例如less編譯成css，ES6 語法轉成 ES5等等。
減少io請求。通常我們在請求後，會回傳一個html到瀏覽器。這時，我們如果開啟控制台，就會發現在html頁面透過script,link等標籤引用的靜態資源，瀏覽器會再次發出請求去取得這些資源。但是webpack的打包，將所有的靜態資源都合併好了，減少了io請求。

【相關推薦：Redis影片教學】

以上是react和webpack的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

看更多