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

創(chuàng)新互聯(lián)是一家專業(yè)提供瀾滄企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計、成都做網(wǎng)站、H5建站、小程序制作等業(yè)務(wù)。10年已為瀾滄眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

談?wù)勀銓ebpack的理解

1.Webpack是什么？

webpack 是一個靜態(tài)模塊打包器，當(dāng) webpack 處理應(yīng)用程序時，會遞歸構(gòu)建一個依賴關(guān)系圖，其中包含應(yīng)用程序需要的每個模塊，然后將這些模塊打包成一個或多個 bundle。

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

2.可以說說打包過程/構(gòu)建流程
3.可以說說對前端運行的優(yōu)化

Webpack的打包過程/打包原理/構(gòu)建流程？

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

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

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

總結(jié)

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

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

• 編譯:從entry 觸發(fā)，對每個Module 串行調(diào)用對應(yīng)的 Loader對模塊進行翻譯，再找出該模塊依賴的模塊，遞歸進行編譯處理。

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

• 根據(jù)依賴關(guān)系圖，組裝成包含多個模塊的Chunk，將個Chunk轉(zhuǎn)換成文件輸出。

不同entry生成不同chunk，動態(tài)導(dǎo)入也會生成自己的chunk

Webpack中l(wèi)oader的作用/ loader是什么？

Loader 是webpack中提供了一種處理多種文件格式的機制，因為webpack只認(rèn)識JS和JSON，所以Loader相當(dāng)于翻譯官，將其他類型資源進行預(yù)處理。
用于對模塊的"源代碼"進行轉(zhuǎn)換。
loader支持鏈?zhǔn)秸{(diào)用,**調(diào)用的順序是從右往左。**鏈中的每個loader會處理之前已處理過的資源，最終變?yōu)閖s代碼。
可以通過 loader 的預(yù)處理函數(shù)，為 JavaScript 生態(tài)系統(tǒng)提供更多能力。

常見的loader有哪些？

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

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

• css-loader:將css文件變成commonjs模塊加載到j(luò)s中，模塊內(nèi)容是樣式字符串

• style-loader: 創(chuàng)建style標(biāo)簽，將js中的樣式資源插入標(biāo)簽內(nèi)，并將標(biāo)簽添加到head中生效

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

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

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

常見的Plugin有哪些

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

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

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

Webpack 插件的執(zhí)行順序（加載機制）？

Webpack中Loader和Plugin的區(qū)別

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

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

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

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

Webpack 做過哪些優(yōu)化手段？有哪些優(yōu)化手段？

如何利用webpack來優(yōu)化前端性能？ 問的是生產(chǎn)環(huán)境優(yōu)化
如何提高webpack的構(gòu)建速度？ 問的是構(gòu)建速度的優(yōu)化

tree-shaking 刪除沒有使用的代碼 優(yōu)化前端性能/提高構(gòu)建速度

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

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

1.默認(rèn)mode = production ，生產(chǎn)環(huán)境默認(rèn)開啟tree-shaking功能。
2.需要是使用 ES6 規(guī)范編寫模塊代碼,ES6的模塊依賴關(guān)系是確定的，和運行時狀態(tài)無關(guān)
3.盡量不寫帶有副作用的代碼。如編寫了立即執(zhí)行函數(shù)，在函數(shù)里使用了外部變量等。

關(guān)于副作用

如何利用webpack來優(yōu)化前端性能？

• 代碼壓縮

按需加載

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

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

• 使用Dll進行分包

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

• 使用路由懶加載

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

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

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

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

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

如何提高webpack的構(gòu)建速度？

思路1:減少需要構(gòu)建的文件或代碼

• HMR(Hot Module Replacement) 模塊熱替換只重新構(gòu)建發(fā)生變化的模塊 – 開發(fā)環(huán)境中

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

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

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

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

思路2:多進行進行構(gòu)建

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

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

以上就是關(guān)于“webpack面試題及答案實例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。