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

1.Webpack是什么？

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

webpack 就像一條生產(chǎn)線,要經(jīng)過一系列處理流程(loader)后才能將源文件轉(zhuǎn)換成輸出結(jié)果。 這條生產(chǎn)線上的每個處理流程的職責都是單一的,多個流程之間有存在依賴關(guān)系,只有完成當前處理后才能交給下一個流程去處理。 插件就像是一個插入到生產(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í)行編譯。編譯:從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)導入也會生成自己的chunk

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

Loader 是webpack中提供了一種處理多種文件格式的機制，因為webpack只認識JS和JSON，所以Loader相當于翻譯官，將其他類型資源進行預(yù)處理。 用于對模塊的"源代碼"進行轉(zhuǎn)換。 loader支持鏈式調(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標簽，將js中的樣式資源插入標簽內(nèi)，并將標簽添加到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資源，默認會創(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)線上的每個處理流程的職責都是單一的,多個流程之間有存在依賴關(guān)系,只有完成當前處理后才能交給下一個流程去處理。 插件就像是一個插入到生產(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ù)打包，在打包過程中檢測工程中沒有引用過的模塊并進行標記，刪除沒有引用過的模塊，提高構(gòu)建速度，較少程序運行時間。

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

1.默認mode = production，生產(chǎn)環(huá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不會重復打包

使用Dll進行分包

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

使用路由懶加載

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

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

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

js壓縮:利用terser-webpack-plugincss壓縮:利用了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之前

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

以上就是【整理分享】一些webpack面試題（附答案解析）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

關(guān)鍵詞： webpack