2020最新Web前端經典面試題試題及答案(持續更新)-開課吧

Web前端面試題

Web前端面試題：說說你對webpack的看法

解析：webpack是一個模塊打包工具，可以使用webpack管理你的模塊依賴，並編譯輸出模塊們所需要的靜態文件。能很好的管理、打包web開發中所用到的HTML、js、css以及各種靜態文件（圖片、字體等），讓開發過程更加高效。對於不同類型的資源，webpack有對應的模塊加載器。webpack模塊打包器會分析模塊間的依賴關係，最後生成了優化且合併後的靜態資源。

webpack兩大特色：

code splitting（可以自動完成）

loader 可以處理各種類型的靜態文件，並且支持串聯操作 webpack是以commonJS的形式來書寫腳本，但是AMD/CMD的支持也很全面，方便舊項目進行代碼遷移

webpck具有require和browserify的功能，但仍有很多自己的新特性：

對 CommonJS、AMD、ES6的語法做了兼容

對JS、css、圖片等資源文件都支持打包

串聯式模塊化加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對conffeescript、ES6的支持

有獨立的配置文件webpck.config.js

可以將代碼切割成不同的chunk，實現按需加載，降低了初始化時間

支持sourceUrls和sourceMaps，易於調試

具有強大的plugin接口，大多是內部插件，使用起來比較靈活

webpack使用異步IO並具有多級緩存，在增亮編譯上更加快

Web前端面試題：webpack3和webpack4區別

解析：1. mode

webpack增加了一個mode配置，只有兩種值development | production。對不同的環境他會啟用不同的配置。

2. CommonsChunkPlugin

CommonChunksPlugin已經從webpack4中移除。 可使用optimization.splitChunks進行模塊劃分（提取公用代碼）。 但是需要注意一個問題，默認配置只會對異步請求的模塊進行提取拆分，如果要對entry進行拆分 需要設置optimization.splitChunks.chunks = 'all'。

3. webpack4使用MiniCssExtractPlugin取代ExtractTextWebpackPlugin。

4. 代碼分割。

使用動態import，而不是用system.import或者require.ensure

5. vue-loader。

使用vue-loader插件為.vue文件中的各部分使用相對應的loader，比如css-loader等

6. UglifyJsPlugin

現在也不需要使用這個plugin了，只需要使用optimization.minimize為true就行，production mode下面自動為true

optimization.minimizer可以配置你自己的壓縮程序

Web前端面試題：簡單說一下babel的原理

解析：babel的轉譯過程分為三個階段：parsing、transforming、generating，以ES6代碼轉譯為ES5代碼為例，babel轉譯的具體過程如下：

1. ES6代碼輸入

2. babylon 進行解析得到 AST

3. plugin 用 babel-traverse 對 AST 樹進行遍歷轉譯,得到新的AST樹 4. 用 babel-generator 通過 AST 樹生成 ES5 代碼

本篇收錄了一些面試中經常會遇到的經典面試題以及自己面試過程中遇到的一些問題，並且都給出了我在網上收集的答案。通過對本篇知識的整理以及經驗的總結，希望能幫到更多的前端面試者。（如有錯誤或更好的答案，歡迎指正，水平有限，望各位不吝指教。