Webpack相關面試題整理

2021-09-19 06:00:23 字數 1321 閱讀 4211

1. gulp/grunt 與 webpack的區別是什麼?

grunt 與 gulp

grunt和gulp屬於一類的都是構建工具,只是grunt是根據配置來的,gulp是採用**優於配置的原則,gulp的效能要比grunt的效能要高,它們可以執行指定的任務。

webpack的特點:

webpack 是目前最熱門的前端資源模組化管理和打包工具。

2. webpack是解決什麼問題而生的?

require everything, bundle everything.

3. 如何配置多入口檔案?

4. 你是如何提高webpack構件速度的?

5. 利用webpack如何優化前端效能?

6. webpack的構建流程是什麼?從讀取配置到輸出檔案這個過程盡量說全.

webpack 的執行流程是乙個序列的過程,從啟動到結束會依次執行以下流程:

初始化引數:從配置檔案和 shell 語句中讀取與合併引數,得出最終的引數;

確定入口:根據配置中的 entry 找出所有的入口檔案;

編譯模組:從入口檔案出發,呼叫所有配置的 loader 對模組進行翻譯,再找出該模組依賴的模組,再遞迴本步驟直到所有入口依賴的檔案都經過了本步驟的處理;

完成模組編譯:在經過第4步使用 loader 翻譯完所有模組後,得到了每個模組被翻譯後的最終內容以及它們之間的依賴關係;

輸出資源:根據入口和模組之間的依賴關係,組裝成乙個個包含多個模組的 chunk,再把每個 chunk 轉換成乙個單獨的檔案加入到輸出列表,這步是可以修改輸出內容的最後機會;

輸出完成:在確定好輸出內容後,根據配置確定輸出的路徑和檔名,把檔案內容寫入到檔案系統。

在以上過程中,webpack 會在特定的時間點廣播出特定的事件,外掛程式在監聽到感興趣的事件後會執行特定的邏輯,並且外掛程式可以呼叫 webpack 提供的 api 改變 webpack 的執行結果。

詳解:7. webpack的核心概念

介紹下loader/plugin

loader

webpack允許我們使用loader來處理檔案,loader是乙個匯出為function的node模組。可以將匹配到的檔案進行一次轉換,同時loader可以鏈式傳遞。

plugin

webpack的plugin比loader強大,通過鉤子可以涉及整個構建流程,可以做一些在構建範圍內的事情。

webpack原理

webpack之loader和plugin簡介

Webpack面試題整理

什麼是loader?什麼是plugin module,chunk,bundle 常見的loader與plugins webpack 構建流程 模組熱更新 懶載入 多頁面打包配置 公共 提取 splitchunks vendor dllplugin動態鏈結庫外掛程式 new addassetwebpa...

http協議相關面試題整理

1 什麼是http協議無狀態協議?怎麼解決http協議無狀態協議?1 無狀態協議對於事務處理沒有記憶能力。缺少狀態意味著如果後續處理需要前面的資訊 2 無狀態協議解決方法 通過1 cookie 2 通過session會話儲存 2 http報文由什麼組成?請求報文包括 1 請求行 包含請求方法,url...

面試題整理

2014.3.19日整理 1.建立一張表hack 裡面就乙個欄位num,然後用sql語句從1開始插入到100,怎麼寫?oracle 答 1.create tablehack num number 建表語句 2.begin for i in1.100loop insert intohack num v...