webpack面試題及答案實例分析

這篇“webpack面試題及答案實例分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“webpack面試題及答案實例分析”文章吧。

談談你對Webpack的理解

1.Webpack是什么？

webpack 是一個靜態模塊打包器，當 webpack 處理應用程序時，會遞歸構建一個依賴關系圖，其中包含應用程序需要的每個模塊，然后將這些模塊打包成一個或多個 bundle。

webpack 就像一條生產線,要經過一系列處理流程(loader)后才能將源文件轉換成輸出結果。 這條生產線上的每個處理流程的職責都是單一的,多個流程之間有存在依賴關系,只有完成當前處理后才能交給下一個流程去處理。
插件就像是一個插入到生產線中的一個功能,在特定的時機對生產線上的資源做處理。 webpack 在運行過程中會廣播事件,插件只需要監聽它所關心的事件,就能加入到這條生產線中,去改變生產線的運作。

2.可以說說打包過程/構建流程
3.可以說說對前端運行的優化

Webpack的打包過程/打包原理/構建流程？

webpack 的運行流程是一個串行的過程，它的工作流程就是將各個插件串聯起來。

命令行執行npx webpack打包命令開始
1.初始化編譯參數:從配置文件和shell命令中讀取與合并參數
2.開始編譯:根據上一步得到的參數初始化Compiler對象，加載所有配置的Plugin，執行對象的 run 方法開始執行編譯。
3.確定入口:根據配置中的 entry 找出所有的入口文件
4.編譯模塊:從入口文件觸發，調用所有配置的Loader對模塊進行翻譯，再找出該模塊依賴的模塊，然后遞歸本步驟直到所有入口依賴的文件都進行翻譯。
5.完成模塊編譯:在經過第4步使用 Loader 翻譯完所有模塊后，得到了每個模塊被翻譯后的最終內容以及它們之間的依賴關系圖。
6.輸出資源：根據依賴關系圖，組裝成一個個包含多個模塊的Chunk，再把每個Chunk轉化成一個單獨的文件加入到輸出列表，根據配置確定輸出的路徑和文件名，輸出。

在以上過程中，Webpack 會在特定的時間點廣播出特定的事件，插件在監聽到感興趣的事件后會執行特定的邏輯。

總結

• 初始化:從配置文件和shell命令中讀取與合并參數，根據參數初始化Compiler實例，加載Plugin(注冊所有配置的插件)，調用Compiler實例的run方法開始執行編譯。

Compiler編譯對象掌控者webpack生命周期，不執行具體的任務，只是進行一些調度工作。比如執行模塊創建、依賴收集、分塊、打包等
調用run之后，創建Compiltation實例，每次構建都會新創建一個Compiltation實例，包含了這次構建的基本信息
Webpack 會在特定的時間點廣播出特定的事件，插件在監聽到感興趣的事件后會執行特定的邏輯。

• 編譯:從entry 觸發，對每個Module 串行調用對應的 Loader對模塊進行翻譯，再找出該模塊依賴的模塊，遞歸進行編譯處理。

從配置文件（ webpack.config.js ）中指定的 entry 入口，開始解析文件構建 AST 語法樹

• 根據依賴關系圖，組裝成包含多個模塊的Chunk，將個Chunk轉換成文件輸出。

不同entry生成不同chunk，動態導入也會生成自己的chunk

Webpack中loader的作用/ loader是什么？

Loader 是webpack中提供了一種處理多種文件格式的機制，因為webpack只認識JS和JSON，所以Loader相當于翻譯官，將其他類型資源進行預處理。
用于對模塊的"源代碼"進行轉換。
loader支持鏈式調用,**調用的順序是從右往左。**鏈中的每個loader會處理之前已處理過的資源，最終變為js代碼。
可以通過 loader 的預處理函數，為 JavaScript 生態系統提供更多能力。

常見的loader有哪些？

• less-loader:將less文件編譯成css文件

開發中，我們常常會使用less預處理器編寫css樣式，使開發效率提高

• css-loader:將css文件變成commonjs模塊加載到js中，模塊內容是樣式字符串

• style-loader: 創建style標簽，將js中的樣式資源插入標簽內，并將標簽添加到head中生效

• ts-loader: 打包編譯Typescript文件

Plugin有什么作用？/Plugin是什么

Plugin功能更強大，主要目的就是解決loader 無法實現的事情，比如打包優化和代碼壓縮等。
Plugin加載后，在webpack構建的某個時間節點就會觸發plugin定義的功能，幫助webpack做一些事情。實現對webpack的功能擴展。

常見的Plugin有哪些

• html-webpack-plugin 處理html資源，默認會創建一個空的HTML，自動引入打包輸出的所有資源（js/css）

• mini-css-extract-plugin 打包過后的css在js文件里，該插件可以把css單獨抽出來

• clean-webpack-plugin 每次打包時候，CleanWebpackPlugin 插件就會自動把上一次打的包刪除

Webpack 插件的執行順序（加載機制）？

Webpack中Loader和Plugin的區別

總說
webpack 就像一條生產線,要經過一系列處理流程(loader)后才能將源文件轉換成輸出結果。 這條生產線上的每個處理流程的職責都是單一的,多個流程之間有存在依賴關系,只有完成當前處理后才能交給下一個流程去處理。
插件就像是一個插入到生產線中的一個功能,在特定的時機對生產線上的資源做處理。 webpack 在運行過程中會廣播事件,插件只需要監聽它所關心的事件,就能加入到這條生產線中,去改變生產線的運作。

或者分別使用之前的總結說Loader和Plugin是什么

運行時機
1.loader運行在編譯階段
2.plugins 在整個周期都起作用

使用方式
Loader:1.下載 2.使用
Plugin:1.下載 2.引用 3.使用

Webpack 做過哪些優化手段？有哪些優化手段？

如何利用webpack來優化前端性能？ 問的是生產環境優化
如何提高webpack的構建速度？ 問的是構建速度的優化

tree-shaking 刪除沒有使用的代碼 優化前端性能/提高構建速度

tree-shaking是一種基于 ES Module 規范的 Dead Code Elimination 技術打包，在打包過程中檢測工程中沒有引用過的模塊并進行標記，刪除沒有引用過的模塊，提高構建速度，較少程序運行時間。

使用tree-shaking需要注意什么？

1.默認mode = production ，生產環境默認開啟tree-shaking功能。
2.需要是使用 ES6 規范編寫模塊代碼,ES6的模塊依賴關系是確定的，和運行時狀態無關
3.盡量不寫帶有副作用的代碼。如編寫了立即執行函數，在函數里使用了外部變量等。

關于副作用

如何利用webpack來優化前端性能？

• 代碼壓縮

按需加載

• 代碼分割 splitChunks - 在optimization配置項中配置

1.可以將node__mudules中代碼單獨打包成一個chunk輸出（比如使用了jqury？）
2.會自動分析多入口chunk中，有沒有公共的文件，如果有會打包成單獨的一個chunk不會重復打包

• 使用Dll進行分包

正常情況下node_module會被打包成一個文件
使用dll技術，對可以將那些不常更新的框架和庫進行單獨打包，生成一個chunk

• 使用路由懶加載

在代碼中所有被 import()函數引用的模塊，都將打成一個單獨的包，放在 chunk 存儲的目錄下。在瀏覽器運行到這一行代碼時，就會自動請求這個資源，實現異步加載。

Webpack如何配置壓縮代碼？壓縮了什么？

1.在optimization配置項中來配置該插件作為壓縮器進行壓縮。
2.在plugins里使用該插件進行壓縮

js壓縮:利用terser-webpack-plugin
css壓縮:利用了optimize-css-assets-webpack-plugin 插件

刪除了console、注釋、空格、換行、沒有使用的css代碼等

如何提高webpack的構建速度？

思路1:減少需要構建的文件或代碼

• HMR(Hot Module Replacement) 模塊熱替換只重新構建發生變化的模塊 – 開發環境中

• 縮小處理范圍:合理利用這兩個屬性exclude：不需要處理的文件 和 include：需要處理的文件

• babel緩存 第二次構建時，會讀取之前的緩存，只重新構建變化的文件

• 使用Dll進行分包 --> 分包方便按需加載

正常情況下node_module會被打包成一個文件
使用dll技術，對可以將那些不常更新的框架和庫進行單獨打包，生成一個chunk
項目源代碼也需要拆分，可以根據路由來劃分打包文件 --> 怎么實現路由懶加載？webpack中如何實現組件異步加載？

思路2:多進行進行構建

• 多進程打包 thread-loader,將其放在費時的loader之前

進程啟動和進程通信都有開銷，工作時間比較長，才需要多進程打包

以上就是關于“webpack面試題及答案實例分析”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。