柚子快報(bào)激活碼778899分享：前端面試之webpack

http://yzkb.51969.com/

1.webpack配置有哪些：

entry：制定入口文件，可以是單個(gè)或者多個(gè)js文件。這個(gè)配置決定了webpack從哪個(gè)配置開(kāi)始生成依賴關(guān)系圖。output：設(shè)置webpack打包后輸出的目錄和文件名稱，包括path、filename和public path等module：配置了不同的loaders來(lái)處理不同的模塊，例如，對(duì)于css文件，可以使用css-loader和style-loaderresolve：設(shè)置webpack如何解析模塊依賴，包括別名、擴(kuò)展名等。plugins：使用不同的插件可以增強(qiáng)webpack的功能，例如，使用html-webpack-plugin可以講打包后的js文件自動(dòng)引用到html文件中。optimization：可以使用optimization.splitChunks和optimization.runtimeChunk配置代碼拆分和運(yùn)行時(shí)代碼提取等優(yōu)化策略externals：用于配置排除打包的模塊，例如可以將jquery作為外置擴(kuò)展，避免將其打包到應(yīng)用程序中。devtool：配置source-map類(lèi)型context：webpack使用的根目錄，string類(lèi)型必須是絕對(duì)類(lèi)型target：指定webpack編譯的目標(biāo)環(huán)境performance：輸出文件的性能檢查配置noParse；不用解析和處理的模塊stats：控制臺(tái)輸出日志控制

2.有哪些常用的loader和Plugin？

loader：

babel-loader：將ES6+的代碼轉(zhuǎn)換成ES5的代碼css-loader；解析css文件，并處理css中的依賴關(guān)系style-loader：將css代碼注入到HTML文檔中file-loader：解析文件路徑，將文件賦值到輸出目錄，并返回文件路徑url-loader：類(lèi)似于file-loader，但是可以將小于指定大小的文件轉(zhuǎn)成base64編碼的DataUrl格式 plugin：

HtmlWebpackPlugin：生成HTML文件，并自動(dòng)將打包后的js和css文件引入到HTML文件中CleanWebpackPlugin：清除輸出目錄ExtraTextWebpackPlugin：將CSS代碼提取到單獨(dú)的CSS文件中DefinePlugin：定義全局變量UglifyJsWebpackPlugin：壓縮js代碼HotModuleReplacementPlugin：熱模塊替換，用于在開(kāi)發(fā)環(huán)境下實(shí)現(xiàn)熱更新

3.loader和plugin的區(qū)別

功能不同：

loader本質(zhì)是一個(gè)函數(shù)，是一個(gè)轉(zhuǎn)換器，webpack只能解析原生js文件，對(duì)于其他類(lèi)型文件就需要loader進(jìn)行轉(zhuǎn)換plugin是一個(gè)插件，用于增強(qiáng)webpack功能。webpack在運(yùn)行的生命周期中會(huì)出現(xiàn)許多事件，plugin可以監(jiān)聽(tīng)這些事件，在合適的時(shí)機(jī)通過(guò)webpack提供的API改變輸出結(jié)果 用法不同：

loader的配置是在module.rules下進(jìn)行。類(lèi)型為數(shù)組，每一項(xiàng)是一個(gè)對(duì)象，里面描述了對(duì)于什么類(lèi)型的文件，使用什么加載和使用的參數(shù)（options）plugin的配置是在plugins下。類(lèi)型為數(shù)組，每一項(xiàng)是一個(gè)plugin實(shí)例，參數(shù)通過(guò)構(gòu)造函數(shù)傳入

4.webpack的構(gòu)建流程：

首先會(huì)讀取配置文件，然后解析入口文件，對(duì)這些入口文件依賴的模塊進(jìn)行依賴分析，構(gòu)建一個(gè)依賴關(guān)系圖，然后會(huì)處理 不同的loader和plugin，生成一個(gè)或多個(gè)輸出文件

5.什么是webpack的熱更新？原理是什么？

webpack的熱更新就是在不刷新頁(yè)面的前提下，將新代碼替換就代碼。主要基于Webpack的模塊熱替換API。當(dāng)Webpack檢測(cè)到文件變化時(shí)，它會(huì)重新構(gòu)建變化的模塊，并通過(guò)WebSocket將新的模塊發(fā)送到瀏覽器。瀏覽器接收到新的模塊后，會(huì)調(diào)用Webpack提供的module.hot.accept方法來(lái)替換舊的模塊，從而實(shí)現(xiàn)熱更新

6.什么是code splitting

code splitting代碼分割，是一種優(yōu)化技術(shù)。它允許將一個(gè)大的chunk拆分成多個(gè)小的chunk，從而實(shí)現(xiàn)按需加載，減少初始化時(shí)間，并提高應(yīng)用程序的性能。在webpack中通過(guò)optimization。splitchunks配置項(xiàng)來(lái)開(kāi)啟代碼分割

7.webpack的sourcemap是什么？如何配置生成sourcemap？

sourceMap是一種文件，它建立了構(gòu)建后的代碼與原始源代碼之間的映射關(guān)系。通常在開(kāi)發(fā)階段開(kāi)啟，用來(lái)調(diào)試代碼，幫助找出代碼問(wèn)題所在在webpack配置文件中的devtool選項(xiàng)中指定devtool：‘source-map’來(lái)開(kāi)啟

8.webpack的treeshaking原理

webpack的treeshaking是一個(gè)利用ES6模塊靜態(tài)結(jié)構(gòu)特性來(lái)去除生產(chǎn)環(huán)境下不必要代碼的優(yōu)化過(guò)程。其工作原理在于：

當(dāng)webpack分析代碼是，它會(huì)標(biāo)記出所有的import語(yǔ)句和export語(yǔ)句然后，當(dāng)webpack確定某個(gè)模塊沒(méi)有被導(dǎo)入時(shí)，它會(huì)在生成的bundle中排出這個(gè)模塊的代碼同時(shí)webpack還會(huì)進(jìn)行遞歸的標(biāo)記清理，以確保所有未使用的依賴項(xiàng)都不會(huì)出現(xiàn)在最終的bundle中

9.如何提高webpack的打包速度：

利用緩存：利用webpack的持久緩存功能，避免重復(fù)構(gòu)建沒(méi)有變化的代碼使用多進(jìn)程/多線程構(gòu)建：使用thread-loader、happypack等插件可以將構(gòu)建過(guò)程分解為多個(gè)進(jìn)程或線程使用DLLplugin和HardSourceWebpackplugin：DLLlpugin可以將第三方庫(kù)預(yù)先打包成單獨(dú)的文件，減少構(gòu)建時(shí)間，HardSourceWebpackplugin可以緩存中間文件，加速后續(xù)構(gòu)建過(guò)程使用treeshaking：配置webpack的treeshaking機(jī)制，去除未使用的代碼，減小生成的文件體積移除不必要的插件：移除不必要的插件和配置，避免不必要的復(fù)雜性和性能開(kāi)銷(xiāo)

10.如何減少打包后的代碼體積：

代碼分割（codesplitting）：將應(yīng)用程序的代碼劃分為多個(gè)代碼塊，按需加載tree shaking：配置webpack的treeshaking機(jī)制，去除未使用的代碼壓縮代碼：webpack-uglify-parallel使用uglify-js去進(jìn)行js的代碼壓縮使用生產(chǎn)模式，在webpack使用生產(chǎn)模式，通過(guò)設(shè)置mode：production來(lái)啟用優(yōu)化使用壓縮工具：gzip壓縮靜態(tài)資源壓縮利用cdn加速：將項(xiàng)目中引用的靜態(tài)資源路徑修改為cdn 上的路徑，減少圖片、字體等靜態(tài)資源的打包

11.vite比webpack快在哪里

開(kāi)發(fā)模式的差異

webpack是先打包再啟動(dòng)開(kāi)發(fā)服務(wù)器，而vite則是直接啟動(dòng)，然后在按需加載文件（啟動(dòng)項(xiàng)目后檢查源碼source就可以看到）對(duì)es modules的支持

現(xiàn)代瀏覽器本身就支持es modules，會(huì)主動(dòng)請(qǐng)求去獲取所需文件，vite就是充分利用這一點(diǎn)，將開(kāi)發(fā)環(huán)境下的模塊文件直接作為瀏覽器要執(zhí)行的文件，而不是像webpack那樣先打包，在交給瀏覽器執(zhí)行

es modules是什么

通過(guò)使用export和import語(yǔ)句，esmodules允許在瀏覽器端導(dǎo)入和導(dǎo)出模塊。當(dāng)使用esmodules進(jìn)行開(kāi)發(fā)時(shí)，開(kāi)發(fā)者實(shí)際是在構(gòu)建一個(gè)依賴關(guān)系圖，不同依賴項(xiàng)之間通過(guò)導(dǎo)入語(yǔ)句進(jìn)行關(guān)聯(lián)。主流瀏覽器（ie除外）都支持esmodules，并且可以通過(guò)在script標(biāo)簽中設(shè)置type=“module”來(lái)加載模塊。默認(rèn)情況下，模塊會(huì)延遲加載，執(zhí)行時(shí)機(jī)在文檔解析之后，處罰dom事件前底層語(yǔ)言的差異

webpack是基于node。js構(gòu)建的，vite是基于esbuild進(jìn)行預(yù)構(gòu)建依賴，esbuild采取go語(yǔ)言開(kāi)發(fā)熱更新的處理

webpack，模塊或者依賴的模塊發(fā)生改變，會(huì)重新編譯這些模塊，而vite中發(fā)生改變只需要瀏覽器重新請(qǐng)求該模塊就行

12.eslint的概念以及原理

lint會(huì)對(duì)代碼做靜態(tài)分析，檢查出其中的一些結(jié)構(gòu)錯(cuò)誤或者格式錯(cuò)誤，在前端領(lǐng)域中這個(gè)就是eslint

13.babel概念以及原理

babel是一個(gè)流行的用于將新版本ES6+代碼轉(zhuǎn)換成的向后兼容版本（ES5）代碼的javascript編譯器，它還為jsx語(yǔ)法提供了編譯支持，還有一些其他插件可用于轉(zhuǎn)換特定類(lèi)型的代碼

工作原理：三類(lèi)功能

解析：babel接收到源代碼是，會(huì)調(diào)用一個(gè)叫做解析器的工具，用于將源代碼轉(zhuǎn)換成抽象語(yǔ)法樹(shù)（AST）。在這個(gè)過(guò)程中，解析器會(huì)識(shí)別代碼中的語(yǔ)法結(jié)構(gòu)面并將其轉(zhuǎn)換成對(duì)應(yīng)的節(jié)點(diǎn)類(lèi)型轉(zhuǎn)換：一旦AST被創(chuàng)建，Babel將遍歷整個(gè)樹(shù)形結(jié)構(gòu)，對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行轉(zhuǎn)換。這些轉(zhuǎn)換可以是插件、預(yù)設(shè)或手動(dòng)創(chuàng)建的。轉(zhuǎn)換器會(huì)檢查AST的每個(gè)節(jié)點(diǎn)，然后對(duì)其進(jìn)行相應(yīng)的修改或替換，以將新語(yǔ)法轉(zhuǎn)換成舊語(yǔ)法。代碼轉(zhuǎn)換后，Babel會(huì)生成一個(gè)新的AST生成：最后，Babel會(huì)基于轉(zhuǎn)換后的AST生成代碼文本，在這個(gè)步驟中，babel將遍歷轉(zhuǎn)換后的AST，并創(chuàng)建對(duì)應(yīng)的代碼字符串，并將這些字符串組合成一個(gè)完整的Javascript文件

14.css工程化的理解：

css工程化是為了解決以下問(wèn)題：

宏觀設(shè)計(jì)：CSS代碼如何組織、如何拆分、模塊結(jié)構(gòu)怎樣設(shè)計(jì)？

我們希望能優(yōu)化CSS文件的目錄結(jié)構(gòu)，對(duì)現(xiàn)有的CSS文件實(shí)現(xiàn)復(fù)用；編碼優(yōu)化：怎樣寫(xiě)出更好的CSS？

我們希望能寫(xiě)出結(jié)構(gòu)清晰、簡(jiǎn)明易懂的CSS，需要它具有一目了然的嵌套層級(jí)關(guān)系，而不是無(wú)差別的一鋪到底寫(xiě)法；我們希望它具有變量特征、計(jì)算能力、循環(huán)能力等更強(qiáng)的可編程性，這樣我們可以少些一些無(wú)用的代碼構(gòu)建：如何處理我的CSS，才能讓它的打包結(jié)果更優(yōu)？可維護(hù)性：代碼寫(xiě)完了，如何最小化它后續(xù)的變更成本？如何確保任何一個(gè)同事都能輕松接手？

更強(qiáng)的可編程性意味著更優(yōu)質(zhì)的代碼結(jié)構(gòu)，實(shí)現(xiàn)復(fù)用意味著更簡(jiǎn)單的目錄結(jié)構(gòu)和更強(qiáng)的拓展能力，這兩點(diǎn)能做到，自然會(huì)帶來(lái)更強(qiáng)的可維護(hù)性。以下三個(gè)方向都是時(shí)下比較流行的、普適性非常好的css工程化實(shí)踐：

預(yù)處理器：less、Sass重要的工程化插件：PostCsswebpack loader

柚子快報(bào)激活碼778899分享：前端面試之webpack

http://yzkb.51969.com/

好文推薦