持續更新中...
面試傳送門:
webpack
熟練掌握Webpack的常用配置,能夠自己構建前端環境,並進行專案優化;
001.談談你對webpack的看法:
webpack是一個模組打包工具，可以使用它管理專案中的模組依賴，並編譯輸出模組所需的靜態檔案。它可以很好地管理、打包開發中所用到的HTML,CSS,JavaScript和靜態檔案（圖片，字型）等，讓開發更高效。對於不同型別的依賴，webpack有對應的模組載入器，而且會分析模組間的依賴關係，最後合併生成優化的靜態資源。
002.webpack的基本功能和工作原理？
程式碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等等
檔案優化：壓縮 JavaScript、CSS、HTML 程式碼，壓縮合並圖片等
程式碼分割：提取多個頁面的公共程式碼、提取首屏不需要執行部分的程式碼讓其非同步載入
模組合併：在採用模組化的專案有很多模組和檔案，需要構建功能把模組分類合併成一個檔案
自動重新整理：監聽本地原始碼的變化，自動構建，重新整理瀏覽器
程式碼校驗：在程式碼被提交到倉庫前需要檢測程式碼是否符合規範，以及單元測試是否通過
自動釋出：更新完程式碼後，自動構建出線上釋出程式碼並傳輸給釋出系統。
003.webpack構建過程：
從entry裡配置的module開始遞迴解析entry依賴的所有module, 每找到一個module，就會根據配置的loader去找對應的轉換規則。
對module進行轉換後，再解析出當前module依賴的module 這些模組會以entry為單位分組，一個entry和其所有依賴的module被分到一個組Chunk。
最後webpack會把所有Chunk轉換成檔案輸出 在整個流程中webpack會在恰當的時機執行plugin裡定義的邏輯
004.webpack打包原理:
將所有依賴打包成一個bundle.js，通過程式碼分割成單元片段按需載入。
005.什麼是entry,output?
entry 入口，告訴webpack要使用哪個模組作為構建專案的起點，預設為./src/index.js
output 出口，告訴webpack在哪裡輸出它打包好的程式碼以及如何命名，預設為./dist
006.什麼是loader，plugins?
loader是用來告訴webpack如何轉換某一型別的檔案，並且引入到打包出的檔案中。
plugins(外掛)作用更大，可以打包優化，資源管理和注入環境變數
007.什麼是bundle,chunk,module?
bundle是webpack打包出來的檔案，chunk是webpack在進行模組的依賴分析的時候，程式碼分割出來的程式碼塊。module是開發中的單個模組
008.npm打包時需要注意哪些？如何利用webpack來更好的構建？
完善基本資訊;
定義依賴;
忽略檔案;
打標籤;
009.有哪些常見的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 程式碼;
010.webpack規範:
webpack預設遵循commonjs規範 module.exports
使用webpack進行打包時有兩種模式：
開發模式：主要是用於測試,程式碼除錯等;
生產模式：要考慮效能問題,要壓縮 如果沒有外掛 就不會壓縮;
預設情況下webpack的配置檔案叫webpack.config.js，可以通過--config指定webpack的配置檔名
011.配置流程：
你可以嘗試配置腳手架嗎?可以
012.loader:
css需要兩個loader來處理：css-loader style-loader
postcss-loader 他提供了一種方式用 JavaScript 程式碼來處理 CSS。它負責把 CSS 程式碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由外掛來進行處理。
-webkit-transform: rotate(45deg); transform: rotate(45deg);
mini-css-extract-plugin 以前都是之間引入內部樣式，把css專門打包成一個css檔案，在index.html檔案中引入css
optimize-css-assets-webpack-plugin css壓縮
terser-webpack-plugin css壓縮 js不能壓縮了,然後有一個外掛,能壓縮js
file-loader 是讓webpack打包圖片
url-loader可以讓圖片轉化base64，也可以讓webpack打包圖片
webpack 預設情況下不支援js的高階語法,所以需要使用babel;
babel轉化; npm i @babel/core @babel/preset-env babel-loader --save-dev
013.plugins:
html-webpack-plugin 根據模組生成一個html檔案 此時不會在dist資料夾下面新建index檔案了
我需要在public新建 index檔案
根據這個模板檔案 在記憶體中生成 index.html 然後自動引入bundle.js
clean-webpack-plugin 去掉沒有用到的模組
014.loader與plugin的區別？
- loader是使webpack擁有載入和解析非js檔案的能力
- plugin 可以擴充套件webpack的功能，使得webpack更加靈活。可以在構建的過程中通過webpack的api改變輸出的結果