webpack面試題彙總

Webpack · 發表 2018-11-30 20:52:13

摘要：這是webpack系列文章的十一篇，整理了一些關於webpack的面試題，對之前的內容做一次總結 webpack官網 https://webpack.js.org/ webpack中文網 https://www.webpackjs.com/ 什麼是webpack web...

這是webpack系列文章的十一篇，整理了一些關於webpack的面試題，對之前的內容做一次總結

webpack官網 ofollow,noindex">https://webpack.js.org/

webpack中文網 https://www.webpackjs.com/

什麼是webpack

webpack是一個打包模組化javascript的工具，在webpack裡一切檔案皆模組，通過loader轉換檔案，通過plugin注入鉤子，最後輸出由多個模組組合成的檔案，webpack專注構建模組化專案。

WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。

官網的圖片形象的展示了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 程式碼

幾個常見的plugin

define-plugin：定義環境變數
terser-webpack-plugin：通過TerserPlugin壓縮ES6程式碼
html-webpack-plugin 為html檔案中引入的外部資源，可以生成建立html入口檔案
mini-css-extract-plugin：分離css檔案
clean-webpack-plugin：刪除打包檔案
happypack：實現多執行緒加速編譯

webpack與grunt、gulp的不同？

Webpack與Gulp、Grunt沒有什麼可比性，它可以看作模組打包機，通過分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模組化的解決方案，不過Webpack的優點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。

他們的工作方式也有較大區別：

Grunt和Gulp的工作方式是：在一個配置檔案中，指明對某些檔案進行類似編譯，組合，壓縮等任務的具體步驟，工具之後可以自動替你完成這些任務。

Webpack的工作方式是：把你的專案當做一個整體，通過一個給定的主檔案（如：index.js），Webpack將從這個檔案開始找到你的專案的所有依賴檔案，使用loaders處理它們，最後打包為一個（或多個）瀏覽器可識別的JavaScript檔案。

三者都是前端構建工具，grunt和gulp在早期比較流行，現在webpack相對來說比較主流，不過一些輕量化的任務還是會用gulp來處理，比如單獨打包CSS檔案等。

grunt和gulp是基於任務和流（Task、Stream）的。類似jQuery，找到一個（或一類）檔案，對其做一系列鏈式操作，更新流上的資料，整條鏈式操作構成了一個任務，多個任務就構成了整個web的構建流程。

webpack是基於入口的。webpack會自動地遞迴解析入口所需要載入的所有資原始檔，然後用不同的Loader來處理不同的檔案，用Plugin來擴充套件webpack功能。

所以總結一下：

從構建思路來說

gulp和grunt需要開發者將整個前端構建過程拆分成多個Task，併合理控制所有Task的呼叫關係

webpack需要開發者找到入口，並需要清楚對於不同的資源應該使用什麼Loader做何種解析和加工

對於知識背景來說

gulp更像後端開發者的思路，需要對於整個流程瞭如指掌 webpack更傾向於前端開發者的思路

webpack有哪些優點

專注於處理模組化的專案，能做到開箱即用，一步到位
可通過plugin擴充套件，完整好用又不失靈活
使用場景不侷限於web開發
社群龐大活躍，經常引入緊跟時代發展的新特性，能為大多數場景找到已有的開源擴充套件
良好的開發體驗

webpack的缺點

webpack的缺點是隻能用於採用模組化開發的專案

分別介紹bundle，chunk，module是什麼

bundle：是由webpack打包出來的檔案，

chunk：程式碼塊，一個chunk由多個模組組合而成，用於程式碼的合併和分割。

module：是開發中的單個模組，在webpack的世界，一切皆模組，一個模組對應一個檔案，webpack會從配置的entry中遞迴開始找出所有依賴的模組。

分別介紹什麼是loader?什麼是plugin?

loader：模組轉換器，用於將模組的原內容按照需要轉成你想要的內容

plugin：在webpack構建流程中的特定時機注入擴充套件邏輯，來改變構建結果，是用來自定義webpack打包過程的方式，一個外掛是含有apply方法的一個物件，通過這個方法可以參與到整個webpack打包的各個流程(生命週期)。

什麼是模組熱更新？

模組熱更新是webpack的一個功能，他可以使得程式碼修改過後不用重新整理瀏覽器就可以更新，是高階版的自動重新整理瀏覽器。

devServer中通過hot屬性可以控制模組的熱替換

1，通過配置檔案

const webpack = require('webpack');
const path = require('path');
let env = process.env.NODE_ENV == "development" ? "development" : "production";
const config = {
mode: env,
 devServer: {
hot:true
 }
}
plugins: [
new webpack.HotModuleReplacementPlugin(), //熱載入外掛
],module.exports = config;

2，通過命令列

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "NODE_ENV=developmentwebpack-dev-server --configwebpack.develop.config.js --hot",
},

什麼是Tree-shaking

Tree-shaking可以用來剔除javascript中不用的死程式碼，它依賴靜態的es6模組化語法，例如通過哦import 和export 匯入匯出，Tree-shaking最先在rollup中出現，webpack在2.0中將其引入，css中使用Tree-shaking需要引入Purify-CSS

通過webpack處理長快取

瀏覽器在使用者訪問頁面的時候，為了加快載入速度，會對使用者訪問的靜態資源進行儲存，但是每一次程式碼升級或是更新，都需要瀏覽器去下載新的程式碼，最方便和簡單的更新方式就是引入新的檔名稱。在webpack中可以在output縱輸出的檔案指定chunkhash,並且分離經常更新的程式碼和框架程式碼。通過NameModulesPlugin或是HashedModuleIdsPlugin使再次打包檔名不變。

如何提高webpack的構建速度

通過externals配置來提取常用庫
利用DllPlugin和DllReferencePlugin預編譯資源模組通過DllPlugin來對那些我們引用但是絕對不會修改的npm包來進行預編譯，再通過DllReferencePlugin將預編譯的模組載入進來。
使用Happypack 實現多執行緒加速編譯

要注意的第一點是，它對file-loader和url-loader支援不好，所以這兩個loader就不需要換成happypack了，其他loader可以類似地換一下

使用Tree-shaking和Scope Hoisting來剔除多餘程式碼
使用fast-sass-loader代替sass-loader
babel-loader開啟快取

babel-loader在執行的時候，可能會產生一些執行期間重複的公共檔案，造成程式碼體積大冗餘，同時也會減慢編譯效率

可以加上cacheDirectory引數或使用 transform-runtime 外掛試試

// webpack.config.js
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true
}]
// .bablerc
{
"presets": [
"env",
"react"
],
"plugins": ["transform-runtime"]
}

不需要打包編譯的外掛庫換成全域性"script"標籤引入的方式

比如jQuery外掛，react, react-dom等，程式碼量是很多的，打包起來可能會很耗時

可以直接用標籤引入，然後在webpack配置裡使用 expose-loader 或 externals 或 ProvidePlugin 提供給模組內部使用相應的變數

// @1
use: [{
loader: 'expose-loader',
options: '$'
}, {
loader: 'expose-loader',
options: 'jQuery'
}]
// @2
externals: {
jquery: 'jQuery'
},
// @3
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
 }),

優化構建時的搜尋路徑

在webpack打包時，會有各種各樣的路徑要去查詢搜尋，我們可以加上一些配置，讓它搜尋地更快

比如說，方便改成絕對路徑的模組路徑就改一下，以純模組名來引入的可以加上一些目錄路徑

還可以善於用下resolve alias別名這個欄位來配置

還有exclude等的配置，避免多餘查詢的檔案，比如使用babel別忘了剔除不需要遍歷的

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。

對web開發技術感興趣的同學，歡迎加入Q群：943129070，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。

最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。