前端面試題 -- webpack

摘要： 前言 上一篇前端面試題-小程式 隨著前端的不斷髮展，現代前端開發的複雜度和規模越來越龐大。工程化的思想催生了很多流行框架的程序，作為現在最流行的前端構建工具--webpack，很多面試、工作場景中都會出現了它的身影。所以對於現在的前端來說，瞭解並能夠使用webpack，無論對個人...

前言

上一篇前端面試題-小程式

隨著前端的不斷髮展，現代前端開發的複雜度和規模越來越龐大。工程化的思想催生了很多流行框架的程序，作為現在最流行的前端構建工具--webpack，很多面試、工作場景中都會出現了它的身影。所以對於現在的前端來說，瞭解並能夠使用webpack，無論對個人技能或者職場求職來說，都是一種有力的提升

感興趣的小夥伴可以點選這裡 ，檢視完整版前端面試題

如果文章中有出現紕漏、錯誤之處，還請看到的小夥伴留言指正，先行謝過

以下 ↓

1. 對webpack的瞭解

官方文件

本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)，將專案當作一個整體，通過一個給定的的主檔案，webpack將從這個檔案開始找到你的專案的所有依賴檔案，使用loaders處理它們，最後打包成一個或多個瀏覽器可識別的js檔案

核心概念：

• 入口(entry)

入口起點(entry point) 指示webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始

可以通過在webpack 配置中配置entry 屬性，來指定一個入口起點（或多個入口起點）

module.exports = {
entry: './path/to/my/entry/file.js'
};

• 輸出(output)

output 屬性告訴webpack 在哪裡輸出它所建立的bundles ，以及如何命名這些檔案，預設值為./dist

• loader

loader 讓webpack 能夠去處理那些非JavaScript 檔案（webpack 自身只理解JavaScript ）

• 外掛(plugins)

loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。外掛的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變數

• 模式

通過選擇development 或production 之中的一個，來設定mode 引數，你可以啟用相應模式下的webpack 內建的優化

module.exports = {
mode: 'production'
};

2. webpack，裡面的webpack.config.js怎麼配置

let webpack = require('webpack');

module.exports = {
entry:'./entry.js',//入口檔案

output:{
//node.js中__dirname變數獲取當前模組檔案所在目錄的完整絕對路徑
path:__dirname, //輸出位置
filename:'build.js' //輸入檔案
},

module:{
// 關於模組的載入相關，我們就定義在module.loaders中
// 這裡通過正則表示式去匹配不同字尾的檔名，然後給它們定義不同的載入器。
// 比如說給less檔案定義串聯的三個載入器（！用來定義級聯關係）：
rules:[
{
test:/\.css$/,//支援正則
loader:'style-loader!css-loader'
}
]
},

//配置服務
devServer:{
hot:true, //啟用熱模組替換
inline:true 
//此模式支援熱模組替換：熱模組替換的好處是隻替換更新的部分,而不是頁面過載.
},

//其他解決方案配置
resolve:{ 
extensions:['','.js','.json','.css','.scss']
},

//外掛
plugins:[
new webpack.BannerPlugin('This file is create by baibai')
]

}

3. webpack本地開發怎麼解決跨域的

• 下載 webpack-dev-server 外掛
• 配置 webpack.config.js 檔案

// webpack.config.js

var WebpackDevServer = require("webpack-dev-server");

module.exports = {
...

devServer: {
...
port: '8088', //設定埠號
// 代理設定
proxy: {
'/api': {
target: 'http://localhost:80/index.php', // 目標代理
pathRewrite: {'^/api' : ''}, // 重寫路徑
secure: false, // 是否接受執行在 HTTPS 上

}
}
}
}

4. 如何配置多入口檔案

配置多個入口檔案

entry: {
home: resolve(__dirname, "src/home/index.js"),
about: resolve(__dirname, "src/about/index.js")
}

5. webpack與grunt、gulp的不同

為什麼選擇webpack

6. 有哪些常見的Loader？他們是解決什麼問題的

• css-loader ：載入CSS ，支援模組化、壓縮、檔案匯入等特性
• style-loader ：把CSS 程式碼注入到JavaScript 中 ，通過DOM 操作去載入CSS
• slint-loader ：通過SLint 檢查JavaScript 程式碼
• babel-loader ：把ES6 轉換成ES5
• file-loader ：把檔案輸出到一個資料夾中，在程式碼中通過相對URL 去引用輸出的檔案
• url-loader ：和file-loader 類似，但是能在檔案很小的情況下以base64 的方式把檔案內容注入到程式碼中去

7. 有哪些常見的Plugin？他們是解決什麼問題的

define-plugin
commons-chunk-plugin

8. Loader和Plugin的不同

• loader 載入器

• Plugin 外掛

9. webpack的構建流程是什麼

1. 初始化引數：從配置檔案和Shell 語句中讀取與合併引數，得出最終的引數
2. 開始編譯：用上一步得到的引數初始化Compiler 物件，載入所有配置的外掛，執行物件的run 方法開始執行編譯
3. 確定入口：根據配置中的entry 找出所有的入口檔案
4. 編譯模組：從入口檔案出發，呼叫所有配置的Loader 對模組進行翻譯，再找出該模組依賴的模組，再遞迴本步驟直到所有入口依賴的檔案都經過了本步驟的處理
5. 完成模組編譯：在經過第4步使用Loader 翻譯完所有模組後，得到了每個模組被翻譯後的最終內容以及它們之間的依賴關係
6. 輸出資源：根據入口和模組之間的依賴關係，組裝成一個個包含多個模組的Chunk ，再把每個Chunk 轉換成一個單獨的檔案加入到輸出列表，這步是可以修改輸出內容的最後機會
7. 輸出完成：在確定好輸出內容後，根據配置確定輸出的路徑和檔名，把檔案內容寫入到檔案系統

在以上過程中，Webpack 會在特定的時間點廣播出特定的事件，外掛在監聽到感興趣的事件後會執行特定的邏輯，並且外掛可以呼叫Webpack 提供的API 改變Webpack 的執行結果

10. 是否寫過Loader和Plugin？描述一下編寫loader或plugin的思路

11. webpack的熱更新是如何做到的？說明其原理

具體可以參考這裡

12. 如何利用webpack來優化前端效能

• 壓縮程式碼。刪除多餘的程式碼、註釋、簡化程式碼的寫法等等方式
• 利用CDN 加速。在構建過程中，將引用的靜態資源路徑修改為CDN 上對應的路徑
• 刪除死程式碼Tree Shaking） 。將程式碼中永遠不會走到的片段刪除掉
• 優化圖片，對於小圖可以使用base64 的方式寫入檔案中
• 按照路由拆分程式碼，實現按需載入，提取公共程式碼
• 給打包出來的檔名新增雜湊，實現瀏覽器快取檔案

13. 如何提高webpack的構建速度

參考這裡

14. 怎麼配置單頁應用？怎麼配置多頁應用

• 單頁應用可以理解為webpack 的標準模式，直接在entry 中指定單頁應用的入口即可
• 多頁應用的話，可以使用webpack 的AutoWebPlugin 來完成簡單自動化的構建，但是前提是專案的目錄結構必須遵守他預設的規範

15. 什麼是bundle,什麼是chunk，什麼是module

bundle 是由webpack 打包出來的檔案，chunk 是指webpack 在進行模組的依賴分析的時候，程式碼分割出來的程式碼塊。module 是開發中的單個模組

後記

前端發展日新月異，只有保持不斷學習的姿態，才能走的更遠

希望這些面試題可以幫助大家溫故知新、查缺補漏，不斷充實自己的專業技能，走的更遠

最後推薦一波GitHub前端面試題完整版 ，歡迎小夥伴們star 關注

不定期更新，期待同行

以上