1、webpack的作用是什么，談?wù)勀銓λ睦斫猓?/span>
現(xiàn)在的前端網(wǎng)頁功能豐富，特別是SPA（single page web application 單頁應(yīng)用）技術(shù)流行后，JavaScript的復(fù)雜度增加和需要一大堆依賴包，還需要解決Scss，Less……新增樣式的擴(kuò)展寫法的編譯工作。
所以現(xiàn)代化的前端已經(jīng)完全依賴于webpack的輔助了。
現(xiàn)在最流行的三個前端框架，可以說和webpack已經(jīng)緊密相連，框架官方都推出了和自身框架依賴的webpack構(gòu)建工具。
react.js+WebPack
vue.js+WebPack
AngluarJS+WebPack
2、webpack的工作原理?
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Sass，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。在3.0出現(xiàn)后，Webpack還肩負(fù)起了優(yōu)化項(xiàng)目的責(zé)任。
3、webpack打包原理
把一切都視為模塊：不管是 css、JS、Image 還是 html 都可以互相引用，通過定義 entry.js，對所有依賴的文件進(jìn)行跟蹤，將各個模塊通過 loader 和 plugins 處理，然后打包在一起。
按需加載：打包過程中 Webpack 通過 Code Splitting 功能將文件分為多個 chunks，還可以將重復(fù)的部分單獨(dú)提取出來作為 commonChunk，從而實(shí)現(xiàn)按需加載。把所有依賴打包成一個 bundle.js 文件，通過代碼分割成單元片段并按需加載
4、webpack的核心概念
Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始，可抽象成輸入。告訴webpack要使用哪個模塊作為構(gòu)建項(xiàng)目的起點(diǎn)，默認(rèn)為./src/index.js
output ：出口，告訴webpack在哪里輸出它打包好的代碼以及如何命名，默認(rèn)為./dist
Module：模塊，在 Webpack 里一切皆模塊，一個模塊對應(yīng)著一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。
Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用于代碼合并與分割。
Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。
Plugin：擴(kuò)展插件，在 Webpack 構(gòu)建流程中的特定時機(jī)會廣播出對應(yīng)的事件，插件可以監(jiān)聽這些事件的發(fā)生，在特定時機(jī)做對應(yīng)的事情。
5、Webpack的基本功能有哪些？
代碼轉(zhuǎn)換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等等
文件優(yōu)化：壓縮 JavaScript、CSS、html 代碼，壓縮合并圖片等
代碼分割：提取多個頁面的公共代碼、提取首屏不需要執(zhí)行部分的代碼讓其異步加載
模塊合并：在采用模塊化的項(xiàng)目有很多模塊和文件，需要構(gòu)建功能把模塊分類合并成一個文件
自動刷新：監(jiān)聽本地源代碼的變化，自動構(gòu)建，刷新瀏覽器
代碼校驗(yàn)：在代碼被提交到倉庫前需要檢測代碼是否符合規(guī)范，以及單元測試是否通過
自動發(fā)布：更新完代碼后，自動構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。
6、gulp/grunt 與 webpack的區(qū)別是什么?
三者都是前端構(gòu)建工具，grunt和gulp在早期比較流行，現(xiàn)在webpack相對來說比較主流，不過一些輕量化的任務(wù)還是會用gulp來處理，比如單獨(dú)打包CSS文件等。
grunt和gulp是基于任務(wù)和流（Task、Stream）的。
類似jQuery，找到一個（或一類）文件，對其做一系列鏈?zhǔn)讲僮?，更新流上的?shù)據(jù)， 整條鏈?zhǔn)讲僮鳂?gòu)成了一個任務(wù)，多個任務(wù)就構(gòu)成了整個web的構(gòu)建流程。
webpack是基于入口的。
webpack會自動地遞歸解析入口所需要加載的所有資源文件，然后用不同的Loader來處理不同的文件，用Plugin來擴(kuò)展webpack功能。
7、webpack是解決什么問題而生的?
如果像以前開發(fā)時一個html文件可能會引用十幾個js文件,而且順序還不能亂，因?yàn)樗鼈兇嬖谝蕾囮P(guān)系，同時對于ES6+等新的語法，less, sass等CSS預(yù)處理都不能很好的解決……，此時就需要一個處理這些問題的工具。
8、你是如何提高webpack構(gòu)件速度的?
多入口情況下，使用CommonsChunkPlugin來提取公共代碼
通過externals配置來提取常用庫
利用DllPlugin和DllReferencePlugin預(yù)編譯資源模塊通過DllPlugin來對那些我們
引用但是絕對不會修改的npm包來進(jìn)行預(yù)編譯，再通過DllReferencePlugin將預(yù)編譯的模塊加載進(jìn)來。
使用Happypack 實(shí)現(xiàn)多線程加速編譯
使用webpack-uglify-paralle來提升uglifyPlugin的壓縮速度。
原理上webpack-uglify-parallel采用了多核并行壓縮來提升壓縮速度
使用Tree-shaking和Scope Hoisting來剔除多余代碼
9、npm打包時需要注意哪些？如何利用webpack來更好的構(gòu)建？
Npm是目前最大的 JavaScript 模塊倉庫，里面有來自全世界開發(fā)者上傳的可復(fù)用模塊。
你可能只是JS模塊的使用者，但是有些情況你也會去選擇上傳自己開發(fā)的模塊。
關(guān)于NPM模塊上傳的方法可以去官網(wǎng)上進(jìn)行學(xué)習(xí)，這里只講解如何利用webpack來構(gòu)建。
NPM模塊需要注意以下問題：
要支持CommonJS模塊化規(guī)范，所以要求打包后的最后結(jié)果也遵守該規(guī)則。
Npm模塊使用者的環(huán)境是不確定的，很有可能并不支持ES6，所以打包的最后結(jié)果應(yīng)該是采用ES5編寫的。并且如果ES5是經(jīng)過轉(zhuǎn)換的，請最好連同SourceMap一同上傳。
Npm包大小應(yīng)該是盡量?。ㄓ行﹤}庫會限制包大小）
發(fā)布的模塊不能將依賴的模塊也一同打包，應(yīng)該讓用戶選擇性的去自行安裝。這樣可以避免模塊應(yīng)用者再次打包時出現(xiàn)底層模塊被重復(fù)打包的情況。
UI組件類的模塊應(yīng)該將依賴的其它資源文件，例如.css文件也需要包含在發(fā)布的模塊里。
10、前端為什么要進(jìn)行打包和構(gòu)建？
代碼層面：
體積更?。═ree-shaking、壓縮、合并），加載更快
編譯高級語言和語法（TS、ES6、模塊化、scss）
兼容性和錯誤檢查（polyfill,postcss,eslint）
研發(fā)流程層面：
統(tǒng)一、高效的開發(fā)環(huán)境
統(tǒng)一的構(gòu)建流程和產(chǎn)出標(biāo)準(zhǔn)
集成公司構(gòu)建規(guī)范（提測、上線）
11、webpack的構(gòu)建流程是什么?從讀取配置到輸出文件這個過程盡量說全。
Webpack 的運(yùn)行流程是一個串行的過程，從啟動到結(jié)束會依次執(zhí)行以下流程：
初始化參數(shù)：從配置文件和 Shell 語句中讀取與合并參數(shù)，得出最終的參數(shù)；
開始編譯：用上一步得到的參數(shù)初始化 Compiler 對象，加載所有配置的插件，執(zhí)行對象的 run 方法開始執(zhí)行編譯；
確定入口：根據(jù)配置中的 entry 找出所有的入口文件；
編譯模塊：從入口文件出發(fā)，調(diào)用所有配置的 Loader 對模塊進(jìn)行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理；
完成模塊編譯：在經(jīng)過第4步使用 Loader 翻譯完所有模塊后，得到了每個模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系；
輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個個包含多個模塊的 Chunk，再把每個 Chunk 轉(zhuǎn)換成一個單獨(dú)的文件加入到輸出列表，這步是可以修改輸出內(nèi)容的最后機(jī)會；
輸出完成：在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和文件名，把文件內(nèi)容寫入到文件系統(tǒng)。
在以上過程中，Webpack 會在特定的時間點(diǎn)廣播出特定的事件，插件在監(jiān)聽到感興趣的事件后會執(zhí)行特定的邏輯，并且插件可以調(diào)用 Webpack 提供的 API 改變 Webpack 的運(yùn)行結(jié)果。
12、怎么配置單頁應(yīng)用？怎么配置多頁應(yīng)用？
單頁應(yīng)用可以理解為webpack的標(biāo)準(zhǔn)模式，直接在entry中指定單頁應(yīng)用的入口即可，這里不再贅述
多頁應(yīng)用的話，可以使用webpack的 AutoWebPlugin來完成簡單自動化的構(gòu)建，但是前提是項(xiàng)目的目錄結(jié)構(gòu)必須遵守他預(yù)設(shè)的規(guī)范。多頁應(yīng)用中要注意的是：
每個頁面都有公共的代碼，可以將這些代碼抽離出來，避免重復(fù)的加載。比如，每個頁面都引用了同一套css樣式表
隨著業(yè)務(wù)的不斷擴(kuò)展，頁面可能會不斷的追加，所以一定要讓入口的配置足夠靈活，避免每次添加新頁面還需要修改構(gòu)建配置
13、Loader機(jī)制的作用是什么？
webpack默認(rèn)只能打包js文件，配置里的module.rules數(shù)組配置了一組規(guī)則，告訴 Webpack 在遇到哪些文件時使用哪些 Loader 去加載和轉(zhuǎn)換打包成js。
注意：
use屬性的值需要是一個由 Loader 名稱組成的數(shù)組，Loader 的執(zhí)行順序是由后到前的；
每一個 Loader 都可以通過 URL querystring 的方式傳入?yún)?shù)，例如css-loader?minimize中的minimize告訴css-loader要開啟 CSS 壓縮。
14、常用loader
css-loader讀取 合并CSS 文件
style-loader把 CSS 內(nèi)容注入到 JavaScript 里
sass-loader 解析sass文件（安裝sass-loader，node-sass）
postcss-loader自動添加瀏覽器兼容前綴（postcss.config配置）
url-loader將文件轉(zhuǎn)換為base64 URI。
vue-loader處理vue文件。
15、Plugin（插件）的作用是什么？
Plugin 是用來擴(kuò)展 Webpack 功能的，通過在構(gòu)建流程里注入鉤子實(shí)現(xiàn)，它給 Webpack 帶來了很大的靈活性。
Webpack 是通過plugins屬性來配置需要使用的插件列表的。plugins屬性是一個數(shù)組，里面的每一項(xiàng)都是插件的一個實(shí)例，在實(shí)例化一個組件時可以通過構(gòu)造函數(shù)傳入這個組件支持的配置屬性。
16、什么是bundle，什么是chunk，什么是module
bundle：是由webpack打包出來的文件
chunk：是指webpack在進(jìn)行模塊依賴分析的時候，代碼分割出來的代碼塊
module：是開發(fā)中的單個模塊
17、常見Plugins
HtmlWbpackPlugin自動在打包結(jié)束后生成html文件，并引入bundle.js
cleanwebPackPlugin打包自動刪除上次打包文件
18、ExtractTextPlugin插件的作用
ExtractTextPlugin插件的作用是提取出 JavaScript 代碼里的 CSS 到一個單獨(dú)的文件。
對此你可以通過插件的filename屬性，告訴插件輸出的 CSS 文件名稱是通過[name]_[contenthash:8].css字符串模版生成的，里面的[name]代表文件名稱，[contenthash:8]代表根據(jù)文件內(nèi)容算出的8位 hash 值， 還有很多配置選項(xiàng)可以在ExtractTextPlugin的主頁上查到。
19、sourceMap
是一個映射關(guān)系，將打包后的文件隱射到源代碼，用于定位報(bào)錯位置
配置方式:
例如：devtool：‘source-map’
加不同前綴意義：
inline:不生成映射關(guān)系文件，打包進(jìn)main.js
cheap: 1.只精確到行，不精確到列，打包速度快 2.只管業(yè)務(wù)代碼，不管第三方模塊
module：不僅管業(yè)務(wù)代碼，而且管第三方代碼
eval:執(zhí)行效率最快，性能最好
最佳實(shí)踐：
開發(fā)環(huán)境：cheap-module-eval-source-map
線上環(huán)境：cheap-mudole-source-map
20、HMR熱模塊更新
借助webpack.HotModuleReplacementPlugin()，devServer開啟hot
場景1：實(shí)現(xiàn)只刷新css，不影響js
場景2：js中實(shí)現(xiàn)熱更新，只更新指定js模塊
if (module.hot) { module.hot.accept(’./library.js’, function() { // Do something with the updated library module… });}
21、webpack如何配置多入口文件?
entry: { home: resolve(__dirname, "src/home/index.js"), about: resolve(__dirname, "src/about/index.js")}
用于描述入口的對象。你可以使用如下屬性：
dependOn: 當(dāng)前入口所依賴的入口。它們必須在該入口被加載前被加載。
filename: 指定要輸出的文件名稱。
import: 啟動時需加載的模塊。
library: 指定 library 選項(xiàng)，為當(dāng)前 entry 構(gòu)建一個 library。
runtime: 運(yùn)行時 chunk 的名字。如果設(shè)置了，就會創(chuàng)建一個新的運(yùn)行時 chunk。在 webpack 5.43.0 之后可將其設(shè)為 false 以避免一個新的運(yùn)行時 chunk。
publicPath: 當(dāng)該入口的輸出文件在瀏覽器中被引用時，為它們指定一個公共 URL 地址
22、babel 相關(guān): polyfill 以及 runtime 區(qū)別， ES stage 含義，preset–env 作用等等
1.polyfill 以及 runtime 區(qū)別
babel-polyfill 的原理是當(dāng)運(yùn)行環(huán)境中并沒有實(shí)現(xiàn)的一些方法，babel-polyfill會做兼容。
babel-runtime 它是將es6編譯成es5去執(zhí)行。我們使用es6的語法來編寫，最終會通過babel-runtime編譯成es5.也就是說，不管瀏覽器是否支持ES6，只要是ES6的語法，它都會進(jìn)行轉(zhuǎn)碼成ES5.所以就有很多冗余的代碼。
babel-polyfill 它是通過向全局對象和內(nèi)置對象的prototype上添加方法來實(shí)現(xiàn)的。比如運(yùn)行環(huán)境中不支持Array.prototype.find 方法，引入polyfill, 我們就可以使用es6方法來編寫了，但是缺點(diǎn)就是會造成全局空間污染。
babel-runtime: 它不會污染全局對象和內(nèi)置對象的原型，比如說我們需要Promise，我們只需要import Promise from 'babel-runtime/core-js/promise'即可，這樣不僅避免污染全局對象，而且可以減少不必要的代碼。
