webpack的面試題有哪些

這篇文章將為大家詳細(xì)講解有關(guān)webpack的面試題有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

webpack 的構(gòu)建流程是什么

• 初始化參數(shù)：解析webpack配置參數(shù)，合并shell傳入和webpack.config.js文件配置的參數(shù),形成最后的配置結(jié)果；

• 開始編譯：上一步得到的參數(shù)初始化compiler對(duì)象，注冊(cè)所有配置的插件，插件 監(jiān)聽webpack構(gòu)建生命周期的事件節(jié)點(diǎn)，做出相應(yīng)的反應(yīng)，執(zhí)行對(duì)象的run方法開始執(zhí)行編譯；

• 確定入口：從配置的entry入口，開始解析文件構(gòu)建AST語法樹，找出依賴，遞歸下去；

• 編譯模塊：遞歸中根據(jù)文件類型和loader配置，調(diào)用所有配置的loader對(duì)文件進(jìn)行轉(zhuǎn)換，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理；

• 完成模塊編譯并輸出：遞歸完事后，得到每個(gè)文件結(jié)果，包含每個(gè)模塊以及他們之間的依賴關(guān)系，根據(jù)entry或分包配置生成代碼塊chunk;

• 輸出完成：輸出所有的chunk到文件系統(tǒng)；

webpack 的熱更新原理

其實(shí)是自己開啟了express應(yīng)用，添加了對(duì)webpack編譯的監(jiān)聽，添加了和瀏覽器的websocket長(zhǎng)連接，當(dāng)文件變化觸發(fā)webpack進(jìn)行編譯并完成后，會(huì)通過sokcet消息告訴瀏覽器準(zhǔn)備刷新。而為了減少刷新的代價(jià)，就是不用刷新網(wǎng)頁，而是刷新某個(gè)模塊，webpack-dev-server可以支持熱更新，通過生成 文件的hash值來比對(duì)需要更新的模塊，瀏覽器再進(jìn)行熱替換

服務(wù)端

• 啟動(dòng) webpack-dev-server服務(wù)器

• 創(chuàng)建webpack實(shí)例

• 創(chuàng)建server服務(wù)器

• 添加webpack的done事件回調(diào)

• 編譯完成向客戶端發(fā)送消息

• 創(chuàng)建express應(yīng)用app

• 設(shè)置文件系統(tǒng)為內(nèi)存文件系統(tǒng)

• 添加 webpack-dev-middleware 中間件

• 中間件負(fù)責(zé)返回生成的文件

• 啟動(dòng)webpack編譯

• 創(chuàng)建http服務(wù)器并啟動(dòng)服務(wù)

• 使用sockjs在瀏覽器端和服務(wù)端之間建立一個(gè)websocket長(zhǎng)連接

• 創(chuàng)建socket服務(wù)器

客戶端

• webpack-dev-server/client端會(huì)監(jiān)聽到此hash消息

• 客戶端收到ok消息后會(huì)執(zhí)行reloadApp方法進(jìn)行更新

• 在reloadApp中會(huì)進(jìn)行判斷，是否支持熱更新，如果支持的話發(fā)生 webpackHotUpdate事件，如果不支持就直接刷新瀏覽器

• 在 webpack/hot/dev-server.js 會(huì)監(jiān)聽 webpackHotUpdate 事件

• 在check方法里會(huì)調(diào)用module.hot.check方法

• HotModuleReplacement.runtime請(qǐng)求Manifest

• 通過調(diào)用 JsonpMainTemplate.runtime 的 hotDownloadManifest方法

• 調(diào)用JsonpMainTemplate.runtime的hotDownloadUpdateChunk方法通過JSONP請(qǐng)求獲取最新的模塊代碼

• 補(bǔ)丁js取回來或會(huì)調(diào)用 JsonpMainTemplate.runtime.js 的 webpackHotUpdate 方法

• 然后會(huì)調(diào)用 HotModuleReplacement.runtime.js 的 hotAddUpdateChunk方法動(dòng)態(tài)更新 模塊代碼

• 然后調(diào)用hotApply方法進(jìn)行熱更

webpack 打包是hash碼是如何生成的

1、webpack生態(tài)中存在多種計(jì)算hash的方式

• hash

• chunkhash

• contenthash

hash代表每次webpack編譯中生成的hash值，所有使用這種方式的文件hash都相同。每次構(gòu)建都會(huì)使webpack計(jì)算新的hash。chunkhash基于入口文件及其關(guān)聯(lián)的chunk形成，某個(gè)文件的改動(dòng)只會(huì)影響與它有關(guān)聯(lián)的chunk的hash值，不會(huì)影響其他文件contenthash根據(jù)文件內(nèi)容創(chuàng)建。當(dāng)文件內(nèi)容發(fā)生變化時(shí)，contenthash發(fā)生變化

2、避免相同隨機(jī)值

• webpack在計(jì)算hash后分割chunk。產(chǎn)生相同隨機(jī)值可能是因?yàn)檫@些文件屬于同一個(gè)chunk,可以將某個(gè)文件提到獨(dú)立的chunk（如放入entry）

webpack 離線緩存靜態(tài)資源如何實(shí)現(xiàn)

• 在配置webpack時(shí)，我們可以使用html-webpack-plugin來注入到和html一段腳本來實(shí)現(xiàn)將第三方或者共用資源進(jìn)行 靜態(tài)化存儲(chǔ)在html中注入一段標(biāo)識(shí)，例如 <% HtmlWebpackPlugin.options.loading.html %> ,在 html-webpack-plugin 中即可通過配置html屬性，將script注入進(jìn)去

• 利用 webpack-manifest-plugin 并通過配置 webpack-manifest-plugin ,生成 manifestjson 文件，用來對(duì)比js資源的差異，做到是否替換，當(dāng)然，也要寫緩存script

• 在我們做Cl以及CD的時(shí)候，也可以通過編輯文件流來實(shí)現(xiàn)靜態(tài)化腳本的注入，來降低服務(wù)器的壓力，提高性能

• 可以通過自定義plugin或者h(yuǎn)tml-webpack-plugin等周期函數(shù)，動(dòng)態(tài)注入前端靜態(tài)化存儲(chǔ)script

webpack 常見的plugin有哪些

• ProvidePlugin：自動(dòng)加載模塊，代替require和import

• html-webpack-plugin可以根據(jù)模板自動(dòng)生成html代碼，并自動(dòng)引用css和js文件

• extract-text-webpack-plugin 將js文件中引用的樣式單獨(dú)抽離成css文件

• DefinePlugin 編譯時(shí)配置全局變量，這對(duì)開發(fā)模式和發(fā)布模式的構(gòu)建允許不同的行為非常有用。

• HotModuleReplacementPlugin 熱更新

• optimize-css-assets-webpack-plugin 不同組件中重復(fù)的css可以快速去重

• webpack-bundle-analyzer 一個(gè)webpack的bundle文件分析工具，將bundle文件以可交互縮放的treemap的形式展示。

• compression-webpack-plugin 生產(chǎn)環(huán)境可采用gzip壓縮JS和CSS

• happypack：通過多進(jìn)程模型，來加速代碼構(gòu)建

• clean-wenpack-plugin 清理每次打包下沒有使用的文件

• speed-measure-webpack-plugin:可以看至U每個(gè)Loader和Plugin執(zhí)行耗時(shí)（整個(gè)扌丁包耗時(shí)、每個(gè)Plugin和 Loader 耗時(shí)）

• webpack-bundle-analyzer:可視化Webpack輸出文件的體積（業(yè)務(wù)組件、依賴第三方模塊

webpack 插件如何實(shí)現(xiàn)

• webpack本質(zhì)是一個(gè)事件流機(jī)制，核心模塊：tabable(Sync + Async)Hooks 構(gòu)造出 === Compiler(編譯) + Compiletion(創(chuàng)建bundles)

• compiler對(duì)象代表了完整的webpack環(huán)境配置。這個(gè)對(duì)象在啟動(dòng)webpack時(shí)被一次性建立，并配置好所有可操作的設(shè)置，包括options、loader和plugin。當(dāng)在webpack環(huán)境中應(yīng)用一插件時(shí)，插件將收到此compiler對(duì)象的引用?？梢允褂盟鼇碓L問webpack的主環(huán)境

• compilation對(duì)象代表了一次資源版本構(gòu)建。當(dāng)運(yùn)行webpack開發(fā)環(huán)境中間件時(shí)，每當(dāng)檢測(cè)到一個(gè)文件變化，就會(huì)創(chuàng)建一個(gè)新的compilation,從而生成一個(gè)新的編譯資源。一個(gè)compilation對(duì)象表現(xiàn)了當(dāng)前的模塊資源、編譯生成資源、變化的文件、以及被跟蹤依賴的狀態(tài)的信息。compilation對(duì)象也提供了很多關(guān)鍵時(shí)機(jī)的回調(diào)，以供插件做自定義處理時(shí)選擇使用

• 創(chuàng)建一個(gè)插件函數(shù)，在其prototype上定義apply方法，指定一個(gè)webpack自身的事件鉤子

• 函數(shù)內(nèi)部處理webpack內(nèi)部實(shí)例的特定數(shù)據(jù)

• 處理完成后，調(diào)用webpack提供的回調(diào)函數(shù)

function MyWebpackPlugin()(
}；
// prototype 上定義 apply 方法
MyWebpackPlugin.prototype.apply=function(){
// 指定一個(gè)事件函數(shù)掛載到webpack
compiler.pluginCwebpacksEventHook"funcion (compiler)( console. log(“這是一個(gè)插件”)；
// 功能完成調(diào)用后webpack提供的回調(diào)函數(shù)
callback()
})

webpack有哪些常用的Loader

• file-loader：把文件輸出到?個(gè)文件夾中，在代碼中通過相對(duì) URL 去引?輸出的?件

• url-loader：和 file-loader 類似，但是能在?件很?的情況下以 base64 的?式把?件內(nèi)容注?到代碼中去

• source-map-loader：加載額外的 Source Map ?件，以?便斷點(diǎn)調(diào)試

• image-loader：加載并且壓縮圖??件

• babel-loader：把 ES6 轉(zhuǎn)換成 ES5

• css-loader：加載 CSS，?持模塊化、壓縮、?件導(dǎo)?等特性

• style-loader：把 CSS 代碼注?到 JavaScript 中，通過 DOM 操作去加載 CSS。

• eslint-loader：通過 ESLint 檢查 JavaScript 代碼

webpack如何實(shí)現(xiàn)持久化緩存

• 服務(wù)端設(shè)置http緩存頭（cache-control）

• 打包依賴和運(yùn)行時(shí)到不同的chunk，即作為splitChunk,因?yàn)樗麄儙缀跏遣蛔兊?/code>

• 延遲加載：使用import()方式，可以動(dòng)態(tài)加載的文件分到獨(dú)立的chunk,以得到自己的chunkhash

• 保持hash值的穩(wěn)定：編譯過程和文件內(nèi)通的更改盡量不影響其他文件hash的計(jì)算，對(duì)于低版本webpack生成的增量數(shù)字id不穩(wěn)定問題，可用hashedModuleIdsPlugin基于文件路徑生成解決

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

?webpack優(yōu)化前端性能是指優(yōu)化webpack的輸出結(jié)果，讓打包的最終結(jié)果在瀏覽器運(yùn)?快速?效。

• 壓縮代碼：刪除多余的代碼、注釋、簡(jiǎn)化代碼的寫法等等?式。可以利?webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來壓縮JS件， 利? cssnano （css-loader?minimize）來壓縮css

• 利?CDN加速: 在構(gòu)建過程中，將引?的靜態(tài)資源路徑修改為CDN上對(duì)應(yīng)的路徑?？梢岳?webpack對(duì)于 output 參數(shù)和各loader的 publicPath 參數(shù)來修改資源路徑

• Tree Shaking: 將代碼中永遠(yuǎn)不會(huì)?到的?段刪除掉?？梢酝ㄟ^在啟動(dòng)webpack時(shí)追加參數(shù) --optimize-minimize 來實(shí)現(xiàn)

• Code Splitting: 將代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時(shí)可以充分利?瀏覽器緩存

• 提取公共第三?庫: SplitChunksPlugin插件來進(jìn)?公共模塊抽取,利?瀏覽器緩存可以?期緩存這些?需頻繁變動(dòng)的公共代碼

webpack treeShaking機(jī)制的原理

• treeShaking 也叫搖樹優(yōu)化，是一種通過移除多于代碼，來優(yōu)化打包體積的，生產(chǎn)環(huán)境默認(rèn)開啟。

• 可以在代碼不運(yùn)行的狀態(tài)下，分析出不需要的代碼；

• 利用es6模塊的規(guī)范

• ES6 Module引入進(jìn)行靜態(tài)分析，故而編譯的時(shí)候正確判斷到底加載了那些模塊

• 靜態(tài)分析程序流，判斷那些模塊和變量未被使用或者引用，進(jìn)而刪除對(duì)應(yīng)代碼

關(guān)于“webpack的面試題有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。