「面試專欄」前端面試之Webpack篇

• 🧩序言
• 🎨一、基礎(chǔ)知識(shí)學(xué)習(xí)
• 🎲二、常見面試題匯總
• 🎯三、構(gòu)建和打包
• • 1、前端代碼如何進(jìn)行構(gòu)建和打包？
  • 2、前端為何要進(jìn)行打包和構(gòu)建？
  • 3、webpack原理
• 🎰四、模塊相關(guān)
• • 1、module chunk bundle 分別是什么意思，有何區(qū)別？
  • 2、source map是什么？開發(fā)環(huán)境和生產(chǎn)環(huán)境如何使用？
  • 3、如何引用一個(gè)自己編寫的庫lib（第三方模塊）
• 🧶五、loader和plugin
• • 1、webpack中常見的loader有哪些
  • 2、webpaack中常見的plugin有哪些
  • 3、loader和plugin的區(qū)別？
  • 4、是否寫過Loader？簡(jiǎn)單描述一下編寫loader的思路？
  • 5、是否寫過Plugin？簡(jiǎn)單描述一下編寫plugin的思路？
• 🥁六、babel相關(guān)
• • 1、babel和webpack的區(qū)別
  • 2、babel-polyfill和babel-runtime的區(qū)別
  • 3、為何Proxy不能被Polyfill？
• 🥊七、性能優(yōu)化相關(guān)
• • 1、webpack如何實(shí)現(xiàn)懶加載？
  • 2、webpack常見性能優(yōu)化（如何優(yōu)化webpack的構(gòu)建速度？）
  • • （1）從開發(fā)環(huán)境的角度
    • （2）從產(chǎn)出代碼的角度
• 🎬八、結(jié)束語
• 🐣彩蛋 One More Thing
• • （：參考資料
  • （：pdf獲取
  • （：更新地址
  • （：番外篇

🧩序言

在前端的面試中， webpack 也是面試官考察的重點(diǎn)之一。如果說候選人不會(huì) webpack ，從某種層面上來說不會(huì)特別影響面試官最終的面試結(jié)果。但從某種意義上來說，候選人給面試官的印象分就會(huì)稍微折扣了一點(diǎn)點(diǎn)。所以呢，以不變應(yīng)萬變，還是抓緊時(shí)間復(fù)盤學(xué)習(xí)，應(yīng)變面試官有可能涉及到的各種問題。

那么在接下來的這篇文章當(dāng)中呢，將梳理 webpack 的基礎(chǔ)知識(shí)，以及將對(duì)常見面試題進(jìn)行匯總和解答。一起來學(xué)習(xí)吧~😝

🎨一、基礎(chǔ)知識(shí)學(xué)習(xí)

我們先用一張思維導(dǎo)圖來對(duì) webpack 的一些基礎(chǔ)知識(shí)進(jìn)行總結(jié)歸納。詳情見下圖👇

對(duì)于以上內(nèi)容，周一有整理過 5 篇文章。戳webpack基礎(chǔ)知識(shí)傳送門

大家可以到專欄進(jìn)行學(xué)習(xí)查看，同時(shí)，如果想對(duì) webpack 有一個(gè)系統(tǒng)一點(diǎn)的學(xué)習(xí)的話，推薦給大家可以直接看 《Webpack實(shí)戰(zhàn)：入門、進(jìn)階與調(diào)優(yōu)》這本書。

這本書相對(duì)來說對(duì)入門選手會(huì)友好一點(diǎn)，也是周一剛學(xué)習(xí)時(shí)看的一本書。其他書我也還沒看過……等以后再來補(bǔ)充。

基礎(chǔ)知識(shí)學(xué)會(huì)了，那么我們繼續(xù)來看下比較常見的一些面試題匯總和解答~

🎲二、常見面試題匯總

同樣地，我們先用一張思維導(dǎo)圖來了解 webpack 中常見的一些面試題。詳情見下圖👇

現(xiàn)在我們來對(duì)這些問題進(jìn)行一一解答。

🎯三、構(gòu)建和打包

1、前端代碼如何進(jìn)行構(gòu)建和打包？

Webpack 的運(yùn)行流程是一個(gè)串行的過程，從啟動(dòng)到結(jié)束會(huì)依次執(zhí)行以下流程：

• 初始化參數(shù)： 從配置文件和 Shell 語句中q去讀取與合并參數(shù)，得出最終的參數(shù)；
• 開始編譯： 用上一步得到的參數(shù)初始化 Compiler 對(duì)象，加載所有配置的插件，執(zhí)行對(duì)象的 run 方法開始執(zhí)行編譯；
• 確定入口： 根據(jù)配置中的 entry 找出所有的入口文件；
• 編譯模塊： 從入口文件出發(fā)，調(diào)用所有配置的 Loader 對(duì)模塊進(jìn)行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理；
• 完成模塊編譯： 在經(jīng)過第 4 步使用 Loader 翻譯完所有模塊后，得到了每個(gè)模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系；
• 輸出資源： 根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個(gè)個(gè)包含多個(gè)模塊的 Chunk ，再把每個(gè) Chunk 轉(zhuǎn)換成一個(gè)單獨(dú)的文件加入到輸出列表，這步是可以修改輸出內(nèi)容的最后機(jī)會(huì)；
• 輸出完成： 在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和文件名，把文件內(nèi)容寫入到文件系統(tǒng)；

在以上過程中，Webpack 會(huì)在特定的時(shí)間點(diǎn)廣播出特定的事件，插件在監(jiān)聽到感興趣的事件后會(huì)執(zhí)行特定的邏輯，并且插件可以調(diào)用 Webpack 提供的 API 來改變 Webpack 的運(yùn)行結(jié)果。

簡(jiǎn)單來說：

• 初始化參數(shù)： 啟動(dòng)構(gòu)建，讀取與合并配置參數(shù)，加載 Plugin ，實(shí)例化 Compiler ；
• 編譯模塊： 從 Entry 出發(fā)，針對(duì)每個(gè) Module 串行調(diào)用對(duì)應(yīng)的 Loader 去翻譯文件的內(nèi)容，再找到該 Module 依賴的 Module ，遞歸地進(jìn)行編譯處理；
• 完成輸出： 將編譯后的 Module 組合成 Chunk，將 Chunk 轉(zhuǎn)換成文件，輸出到文件系統(tǒng)中。

2、前端為何要進(jìn)行打包和構(gòu)建？

從代碼層面來說：

• 進(jìn)行構(gòu)建和打包后的項(xiàng)目體體積更小（ Tree-Shaking 、壓縮代碼、合并代碼，加載更快）；
• 可以對(duì)高級(jí)語言或語法進(jìn)行編譯（TS， ES6+ ，模塊化、 scss ）；
• 對(duì)代碼的兼容性和錯(cuò)誤進(jìn)行檢查（ polyfill 、 postcss 、 eslint ）。

從研發(fā)層面來說：

• 使得研發(fā)有著更統(tǒng)一、高效的開發(fā)環(huán)境；
• 讓項(xiàng)目組有著統(tǒng)一的構(gòu)建流程和產(chǎn)出標(biāo)準(zhǔn)；
• 在提測(cè)和上線等流程中慢慢集成公司的構(gòu)建規(guī)范。

3、webpack原理

• 首先需要先解析入口文件 entry ，使用@babel/parser ，將其轉(zhuǎn)為 AST(抽象語法樹) ；
• 使用 @babel/traverse 插件，去找出入口文件中的所有 依賴模塊 ；
• 然后使用 @babel/core+ 和 @babel/preset-env 插件，將入口文件的 AST 轉(zhuǎn)為 Code ；
• 將 2 中找到的入口文件的依賴模塊，進(jìn)行 遍歷遞歸 ，重復(fù)執(zhí)行 1，2，3 ；
• 重寫 require 函數(shù)，并與 4 中生成的 遞歸關(guān)系圖 一起，輸出到 bundle 中。

🎰四、模塊相關(guān)

1、module chunk bundle 分別是什么意思，有何區(qū)別？

• module - 代表各個(gè)源碼文件， webpack 中一切皆模塊；
• chunk - 表示多模塊合并成的，如 entry 、 import() 、 splitChunk ；
• bundle - 表示最終的輸出文件。

2、source map是什么？開發(fā)環(huán)境和生產(chǎn)環(huán)境如何使用？

source map 是將編譯、打包、壓縮后的代碼映射回源代碼的過程。打包壓縮后的代碼不具備良好的可讀性，想要調(diào)試源碼就需要 soucre map 。map 文件只要不打開開發(fā)者工具，瀏覽器是不會(huì)加載的。下面給出在開發(fā)環(huán)境和生產(chǎn)環(huán)境下最適用的方式。

開發(fā)環(huán)境：cheap-module-eval-source-map

生產(chǎn)環(huán)境：cheap-module-source-map

注意點(diǎn)： 避免在生產(chǎn)中使用 inline- 和 eval- ，因?yàn)樗鼈儠?huì)增加 bundle 體積大小，并降低整體性能。

3、如何引用一個(gè)自己編寫的庫lib（第三方模塊）

• 在 output 中配置 filename 、 library 以及 libraryTarget 等項(xiàng)，來引用自己編寫的第三方庫；

• 解決庫引用沖突：externals 。

🧶五、loader和plugin

1、webpack中常見的loader有哪些

• file-loader：常用于處理圖片和字體，旨在把文件輸出到一個(gè)文件夾中，之后在代碼中通過相對(duì)的 url 去引用輸出的文件。
• url-loader：常用于處理圖片和字體，與 file-loader 類似，兩個(gè)的區(qū)別在于，對(duì)于 url-loader 來說，用戶可以設(shè)置一個(gè)閾值，當(dāng)大于閾值時(shí)會(huì)交給 file-loader 處理，小于閾值時(shí)返回文件 base64 形式編碼。
• css-loader：用于加載 CSS 文件，支持模塊化、壓縮、文件導(dǎo)入等特性。
• style-loader：用于把 CSS 代碼注入到 JavaScript 中，通過 DOM 操作去加載 CSS 。
• sass-loader：用于將 SCSS/SASS 代碼轉(zhuǎn)換成 CSS 代碼。
• postcss-loader：解決兼容性問題，擴(kuò)展 CSS 語法，使用下一代 CSS ，可以配合 autoprefixer 插件自動(dòng)補(bǔ)齊 CSS3 的廠商前綴。

2、webpaack中常見的plugin有哪些

• html-webpack-plugin：自動(dòng)創(chuàng)建一個(gè)新的 html 文件，并把打包生成的 js 文件自動(dòng)引入到這個(gè) html 文件中。

• clean-webpack-plugin：清空指定目錄或者文件夾。

• ignore-plugin：忽略部分文件。

• splitChunkPlugin：對(duì) js 文件進(jìn)行代碼分割。

• mini-css-extract-plugin：對(duì) css 文件進(jìn)行代碼分割，對(duì)于分割后的代碼來說，支持按需加載。

• optimize-css-assets-webpack-plugin：用于壓縮 css 文件，減少 css 文件的大小。

3、loader和plugin的區(qū)別？

• loader ，可以說是一個(gè)模塊轉(zhuǎn)換器，用于處理我們引用的模塊。比如說，我們想要去引入一個(gè) js 文件，或者是 css 格式的文件，都需要 loader 來幫助我們處理。
• plugin ，可以說是一個(gè)擴(kuò)展插件，它用于在打包過程中的某些時(shí)刻里生效。常見的有 htmlWebpackPlugin 、 cleanWebpackPlugin 等等。

4、是否寫過Loader？簡(jiǎn)單描述一下編寫loader的思路？

• 其本質(zhì)為函數(shù)，函數(shù)中的 this 將會(huì)被作為上下文來提供給 webpack 填充，因此我們不能將 loader 設(shè)為一個(gè)箭頭函數(shù)；

• 函數(shù)接受一個(gè)參數(shù)，這個(gè)參數(shù)為 webpack 傳遞給 loader 的文件源內(nèi)容；

• 函數(shù)中 this 是由 webpack 提供的對(duì)象，能夠獲取當(dāng)前 loader 所需要的各種信息；

• 函數(shù)中有異步操作或同步操作，異步操作通過 this.callback 返回，返回值要求為 string 或者 Buffer 。

代碼如下所示：

// 導(dǎo)出一個(gè)函數(shù)，source為webpack傳遞給loader的文件源內(nèi)容 module.exports = function(source) {const content = doSomeThing2JsString(source);// 如果 loader 配置了 options 對(duì)象，那么this.query將指向 optionsconst options = this.query;// 可以用作解析其他模塊路徑的上下文console.log('this.context');/** this.callback 參數(shù)：* error：Error | null，當(dāng) loader 出錯(cuò)時(shí)向外拋出一個(gè) error* content：String | Buffer，經(jīng)過 loader 編譯后需要導(dǎo)出的內(nèi)容* sourceMap：為方便調(diào)試生成的編譯后內(nèi)容的 source map* ast：本次編譯生成的 AST 靜態(tài)語法樹，之后執(zhí)行的 loader 可以直接使用這個(gè) AST，進(jìn)而省去重復(fù)生成 AST 的過程*/this.callback(null, content); // 異步return content; // 同步 }

5、是否寫過Plugin？簡(jiǎn)單描述一下編寫plugin的思路？

（1） 由于webpack基于發(fā)布訂閱模式，在運(yùn)行的生命周期中會(huì)廣播出許多事件，插件通過監(jiān)聽這些事件，就可以在特定的階段來執(zhí)行自己的插件任務(wù)。

（2） webpack 編譯會(huì)創(chuàng)建兩個(gè)核心對(duì)象：

• compiler：包含了 webpack 環(huán)境種的所有配置信息，包括 options，loader 和 plugin，和 webpack 整個(gè)生命周期相關(guān)的鉤子。

• compilation：作為 plugin 內(nèi)置事件回調(diào)函數(shù)的參數(shù)，包含了當(dāng)前的模塊資源、編譯生成資源、變化的文件以及被跟蹤依賴的狀態(tài)信息。當(dāng)檢測(cè)到一個(gè)文件變化，一次新的 Compilation 將被創(chuàng)建。

（3） 如果自己要實(shí)現(xiàn) plugin ，也需要遵循一定的規(guī)范：

• 插件必須是一個(gè)函數(shù)或者是一個(gè)包含 apply 方法的對(duì)象，這樣才能訪問 compiler 實(shí)例。

• 傳給每個(gè)插件的 compiler 和 compilation 對(duì)象都是同一個(gè)引用，因此不建議修改。

• 異步的事件需要在插件處理完任務(wù)時(shí)去調(diào)用回調(diào)函數(shù)，之后通知 Webpack 進(jìn)入下一個(gè)流程，否則會(huì)卡住。

（4） 實(shí)現(xiàn)plugin的模板如下：

class MyPlugin {// Webpack 會(huì)調(diào)用 MyPlugin 實(shí)例的 apply 方法給插件實(shí)例傳入 compiler 對(duì)象apply (compiler) {// 找到合適的事件鉤子，實(shí)現(xiàn)自己的插件功能compiler.hooks.emit.tap('MyPlugin', compilation => {// compilation: 當(dāng)前打包構(gòu)建流程的上下文console.log(compilation);// do something...})} }

🥁六、babel相關(guān)

1、babel和webpack的區(qū)別

• babel ，編譯 JS 新語法的一個(gè)工具，它不關(guān)心模塊化；
• 而 webpack ，是一個(gè)打包構(gòu)建工具，是多個(gè) loader 和 plugin 的集合，它關(guān)心模塊化。

2、babel-polyfill和babel-runtime的區(qū)別

• babel-polyfill ，旨在解決低版本瀏覽器無法兼容 ES6 的部分新的語法變量的問題，但它有一個(gè)缺點(diǎn)就是會(huì)污染全局，即 @babel/preset-env 會(huì)將 Promise 翻譯成全局變量 var _Promise 。
• 而 babel-runtime 則不會(huì)污染全局， babel-runtime 提供了單獨(dú)的包，用以提供編譯模塊的工具函數(shù)。啟用插件 babel-plugin-transform-runtime 后， Babel 就會(huì)使用 babel-runtime 下的工具函數(shù)。
• 同時(shí)，值得注意的是，當(dāng)引用自己編寫的第三方庫 lib 時(shí)，要用 babel-runtime 。

3、為何Proxy不能被Polyfill？

• Proxy 沒有辦法被 polyfill ，也就是說低版本瀏覽器無法兼容一些新的語法變量，所以這也是我們常說的為啥 vue3 無法兼容低版本瀏覽器。

• 像 class 可以用 function 模擬， Promise 可以用 callback 來模擬，但 Proxy 的功能用 Object.defineProperty 就無法模擬了，所以 vue3 暫時(shí)無法減容低版本瀏覽器。

🥊七、性能優(yōu)化相關(guān)

1、webpack如何實(shí)現(xiàn)懶加載？

• import() 語法。

• 使用 preloading 和 prefetching 來文件進(jìn)行異步加載。

• preload 與 prefetch 的區(qū)別在于： preload 是跟主文件同時(shí)進(jìn)行加載，而不是在主文件加載完才加載的。一般來說，我們都用 prefetch ， 只有等主文件把活干完了，再來加載剩余的我們想要的文件，這樣的邏輯和對(duì)頁面的優(yōu)化才是比較完美的。

2、webpack常見性能優(yōu)化（如何優(yōu)化webpack的構(gòu)建速度？）

（1）從開發(fā)環(huán)境的角度

生產(chǎn)環(huán)境優(yōu)化：

• 優(yōu)化 babel-loader ；
• 使用 IgnorePlugin ，排除掉一些不使用的模塊，且用來縮小打包作用域；
• noParse；
• happyPack（不維護(hù)了）；
• ParallelUglifyPlugin。

開發(fā)環(huán)境優(yōu)化：

• 自動(dòng)刷新：使用 webpackDevServer 來實(shí)現(xiàn)自動(dòng)刷新編譯結(jié)果。
• 熱模塊更新HMR：熱更新又稱熱替換， 這個(gè)機(jī)制可以做到不用刷新瀏覽器而將新變更的模塊替換掉舊的模塊。
• DllPlugin：使用 DllPlugin 進(jìn)行分包，使用 DllReferencePlugin (索引鏈接) 對(duì) manifest.json 引用，讓一些基本不會(huì)改動(dòng)的代碼先打包成靜態(tài)資源，避免反復(fù)編譯浪費(fèi)時(shí)間。

（2）從產(chǎn)出代碼的角度

• 懶加載；
• 提取公共代碼；
• 使用 cdn 加速；
• IgnorePlugin；
• 使用 production ；
• 使用 url-loader 對(duì)小圖片進(jìn)行 base64 編碼；
• 對(duì)生成的 bundle 文件加 hash 值；
• Scope Hosting：
  • 構(gòu)建后的代碼會(huì)存在大量閉包，造成體積增大，運(yùn)行代碼時(shí)創(chuàng)建的函數(shù)作用域變多，內(nèi)存開銷變大。
  • Scope hoisting 將所有模塊的代碼按照引用順序放在一個(gè)函數(shù)作用域里，然后適當(dāng)?shù)闹孛恍┳兞恳?strong>防止變量名沖突.
  • 同時(shí)，必須是 ES6 的語法，因?yàn)橛泻芏嗟谌綆烊圆捎?CommonJS 語法。
  • 因此，為了充分發(fā)揮 Scope hoisting 的作用，需要配置 mainFields 對(duì)第三方模塊優(yōu)先采用 jsnext:main 中指向的 ES6 模塊化語法。

🎬八、結(jié)束語

在上面的文章中，我們從構(gòu)建和打包、模塊相關(guān)、 loader 和 plugin 、 babel 、性能優(yōu)化相關(guān)這五個(gè)方面，對(duì) webpack 的一些常見面試題進(jìn)行了歸納總結(jié)。相信通過上文的學(xué)習(xí)，大家對(duì)這一塊的內(nèi)容又有了一定的了解。關(guān)于 webpack 的常見面試題講到這里就結(jié)束啦！希望對(duì)大家有幫助~

如文章有誤或有想要補(bǔ)充的內(nèi)容，歡迎留言或聯(lián)系 vx:MondayLaboratory 。

最后就是祝各位看到這篇文章的小伙伴們，都能夠斬獲到自己心儀的 offer 呀~🥂🥂🥂

🐣彩蛋 One More Thing

（：參考資料

👉再來一打Webpack面試題

👉騰訊面試官：兄弟，你說你會(huì)Webpack，那說說他的原理？

👉面試官：說說Webpack中Loader和Plugin的區(qū)別？編寫Loader，Plugin的思路？

（：pdf獲取

👉 微信搜索 星期一研究室 并關(guān)注，回復(fù)關(guān)鍵詞 webpack面試pdf 獲取相關(guān)pdf內(nèi)容~

👉回復(fù) 面試大全pdf 可獲取整專欄內(nèi)容🗂?

（：更新地址

👉 offer來了面試專欄

（：番外篇

• 關(guān)注公眾號(hào)星期一研究室，第一時(shí)間關(guān)注優(yōu)質(zhì)文章，更多精選專欄待你解鎖~
• 如果這篇文章對(duì)你有用，記得留個(gè)腳印jio再走哦~
• 以上就是本文的全部?jī)?nèi)容！我們下期見！👋👋👋

總結(jié)

以上是生活随笔為你收集整理的「offer来了」从基础配置到高级配置，16大知识点带你巩固webpack知识体系的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。