10個webpack的面試題，你能接住幾題？-js教程-PHP中文網

這篇文章要跟大家分享10個關於webpack的面試題，查漏補缺，看看這十個面試題你能答對幾個？是否可以全部答對？

10個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編譯
使用sockjs在瀏覽器端和服務端之間建立一個websocket長連線
建立socket伺服器
客戶端

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

在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動態更新模組程式碼
然後呼叫hotApply方法進行熱更
webpack 打包是hash碼是如何產生的

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

hash

#chunkhash
##contenthash
hash代表每次webpack編譯中產生的hash值，所有使用這種方式的檔案hash都相同。每次建置都會使webpack計算新的hash。 chunkhash是基於入口檔案及其關聯的chunk形成，某個檔案的改變只會影響與它有關聯的chunk的hash值，不會影響其他檔案contenthash根據檔案內容建立。當檔案內容變更時，contenthash會變更

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 外掛程式如何實作

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引入進行靜態分析，故而編譯的時候正確判斷到底載入了那些模組
- 靜態分析程式流，判斷那些模組和變數未使用或引用，進而刪除對應程式碼