webpack的面試題有哪些

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

webpack 的構建流程是什么

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

• 開始編譯：上一步得到的參數初始化compiler對象，注冊所有配置的插件，插件 監聽webpack構建生命周期的事件節點，做出相應的反應，執行對象的run方法開始執行編譯；

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

• 編譯模塊：遞歸中根據文件類型和loader配置，調用所有配置的loader對文件進行轉換，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理；

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

• 輸出完成：輸出所有的chunk到文件系統；

webpack 的熱更新原理

其實是自己開啟了express應用，添加了對webpack編譯的監聽，添加了和瀏覽器的websocket長連接，當文件變化觸發webpack進行編譯并完成后，會通過sokcet消息告訴瀏覽器準備刷新。而為了減少刷新的代價，就是不用刷新網頁，而是刷新某個模塊，webpack-dev-server可以支持熱更新，通過生成 文件的hash值來比對需要更新的模塊，瀏覽器再進行熱替換

服務端

• 啟動 webpack-dev-server服務器

• 創建webpack實例

• 創建server服務器

• 添加webpack的done事件回調

• 編譯完成向客戶端發送消息

• 創建express應用app

• 設置文件系統為內存文件系統

• 添加 webpack-dev-middleware 中間件

• 中間件負責返回生成的文件

• 啟動webpack編譯

• 創建http服務器并啟動服務

• 使用sockjs在瀏覽器端和服務端之間建立一個websocket長連接

• 創建socket服務器

客戶端

• webpack-dev-server/client端會監聽到此hash消息

• 客戶端收到ok消息后會執行reloadApp方法進行更新

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

• 在 webpack/hot/dev-server.js 會監聽 webpackHotUpdate 事件

• 在check方法里會調用module.hot.check方法

• HotModuleReplacement.runtime請求Manifest

• 通過調用 JsonpMainTemplate.runtime 的 hotDownloadManifest方法

• 調用JsonpMainTemplate.runtime的hotDownloadUpdateChunk方法通過JSONP請求獲取最新的模塊代碼

• 補丁js取回來或會調用 JsonpMainTemplate.runtime.js 的 webpackHotUpdate 方法

• 然后會調用 HotModuleReplacement.runtime.js 的 hotAddUpdateChunk方法動態更新 模塊代碼

• 然后調用hotApply方法進行熱更

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

1、webpack生態中存在多種計算hash的方式

• hash

• chunkhash

• contenthash

hash代表每次webpack編譯中生成的hash值，所有使用這種方式的文件hash都相同。每次構建都會使webpack計算新的hash。chunkhash基于入口文件及其關聯的chunk形成，某個文件的改動只會影響與它有關聯的chunk的hash值，不會影響其他文件contenthash根據文件內容創建。當文件內容發生變化時，contenthash發生變化

2、避免相同隨機值

• webpack在計算hash后分割chunk。產生相同隨機值可能是因為這些文件屬于同一個chunk,可以將某個文件提到獨立的chunk（如放入entry）

webpack 離線緩存靜態資源如何實現

• 在配置webpack時，我們可以使用html-webpack-plugin來注入到和html一段腳本來實現將第三方或者共用資源進行 靜態化存儲在html中注入一段標識，例如 <% HtmlWebpackPlugin.options.loading.html %> ,在 html-webpack-plugin 中即可通過配置html屬性，將script注入進去

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

• 在我們做Cl以及CD的時候，也可以通過編輯文件流來實現靜態化腳本的注入，來降低服務器的壓力，提高性能

• 可以通過自定義plugin或者html-webpack-plugin等周期函數，動態注入前端靜態化存儲script

webpack 常見的plugin有哪些

• ProvidePlugin：自動加載模塊，代替require和import

• html-webpack-plugin可以根據模板自動生成html代碼，并自動引用css和js文件

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

• DefinePlugin 編譯時配置全局變量，這對開發模式和發布模式的構建允許不同的行為非常有用。

• HotModuleReplacementPlugin 熱更新

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

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

• compression-webpack-plugin 生產環境可采用gzip壓縮JS和CSS

• happypack：通過多進程模型，來加速代碼構建

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

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

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

webpack 插件如何實現

• webpack本質是一個事件流機制，核心模塊：tabable(Sync + Async)Hooks 構造出 === Compiler(編譯) + Compiletion(創建bundles)

• compiler對象代表了完整的webpack環境配置。這個對象在啟動webpack時被一次性建立，并配置好所有可操作的設置，包括options、loader和plugin。當在webpack環境中應用一插件時，插件將收到此compiler對象的引用。可以使用它來訪問webpack的主環境

• compilation對象代表了一次資源版本構建。當運行webpack開發環境中間件時，每當檢測到一個文件變化，就會創建一個新的compilation,從而生成一個新的編譯資源。一個compilation對象表現了當前的模塊資源、編譯生成資源、變化的文件、以及被跟蹤依賴的狀態的信息。compilation對象也提供了很多關鍵時機的回調，以供插件做自定義處理時選擇使用

• 創建一個插件函數，在其prototype上定義apply方法，指定一個webpack自身的事件鉤子

• 函數內部處理webpack內部實例的特定數據

• 處理完成后，調用webpack提供的回調函數

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

webpack有哪些常用的Loader

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

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

• source-map-loader：加載額外的 Source Map ?件，以?便斷點調試

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

• babel-loader：把 ES6 轉換成 ES5

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

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

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

webpack如何實現持久化緩存

• 服務端設置http緩存頭（cache-control）

• 打包依賴和運行時到不同的chunk，即作為splitChunk,因為他們幾乎是不變的

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

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

如何webpack來優化前端性能？

?webpack優化前端性能是指優化webpack的輸出結果，讓打包的最終結果在瀏覽器運?快速?效。

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

• 利?CDN加速: 在構建過程中，將引?的靜態資源路徑修改為CDN上對應的路徑。可以利?webpack對于 output 參數和各loader的 publicPath 參數來修改資源路徑

• Tree Shaking: 將代碼中永遠不會?到的?段刪除掉。可以通過在啟動webpack時追加參數 --optimize-minimize 來實現

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

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

webpack treeShaking機制的原理

• treeShaking 也叫搖樹優化，是一種通過移除多于代碼，來優化打包體積的，生產環境默認開啟。

• 可以在代碼不運行的狀態下，分析出不需要的代碼；

• 利用es6模塊的規范

• ES6 Module引入進行靜態分析，故而編譯的時候正確判斷到底加載了那些模塊

• 靜態分析程序流，判斷那些模塊和變量未被使用或者引用，進而刪除對應代碼

關于“webpack的面試題有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。