面試重點：webpack

持續更新中...

面試傳送門:

• 面試題：HTTP
• 面試題：HTML+CSS
• 面試題：JS
• 面試題：Vue
• 面試問題：接招人事(非技術性問題)

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 轉換成 ES5css-loader：加載 CSS，支持模塊化、壓縮、文件導入等特性style-loader：把 CSS 代碼注入到 JavaScript 中，經過 DOM 操做去加載 CSS。eslint-loader：經過 ESLint 檢查 JavaScript 代碼

010.webpack規範:

webpack默認遵循commonjs規範 module.exports
es6中的規範 export
使用webpack進行打包時有兩種模式：
開發模式：
生產模式：要壓縮 若是沒有插件 就不會壓縮
默認狀況下webpack的配置文件叫webpack.config.js，能夠經過--config指定webpack的配置文件名

011.流程：

嘗試配置腳手架：能夠

012.loader:

css須要兩個loader來處理：css-loader style-loader postcss-loader 有動畫 目的就是使用瀏覽器的兼容。 -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轉化 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 去掉沒有用到的模塊

013.面試問題：

• loader是使webpack擁有加載和解析非js文件的能力
• plugin 能夠擴展webpack的功能，使得webpack更加靈活。能夠在構建的過程當中經過webpack的api改變輸出的結果