1、webpack的作用是什么，談?wù)勀銓λ睦斫猓?/span>

現(xiàn)在的前端網(wǎng)頁功能豐富，特別是SPA（single page web application 單頁應(yīng)用）技術(shù)流行后，JavaScript的復(fù)雜度增加和需要一大堆依賴包，還需要解決Scss，Less……新增樣式的擴展寫法的編譯工作。

所以現(xiàn)代化的前端已經(jīng)完全依賴于webpack的輔助了。

現(xiàn)在最流行的三個前端框架，可以說和webpack已經(jīng)緊密相連，框架官方都推出了和自身框架依賴的webpack構(gòu)建工具。

react.js+WebPack

vue.js+WebPack

AngluarJS+WebPack

2、webpack的工作原理?

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用。在3.0出現(xiàn)后，Webpack還肩負起了優(yōu)化項目的責(zé)任。

3、webpack打包原理

把一切都視為模塊：不管是 css、JS、Image 還是 html 都可以互相引用，通過定義 entry.js，對所有依賴的文件進行跟蹤，將各個模塊通過 loader 和 plugins 處理，然后打包在一起。

按需加載：打包過程中 Webpack 通過 Code Splitting 功能將文件分為多個 chunks，還可以將重復(fù)的部分單獨提取出來作為 commonChunk，從而實現(xiàn)按需加載。把所有依賴打包成一個 bundle.js 文件，通過代碼分割成單元片段并按需加載

4、webpack的核心概念

• Entry：入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始，可抽象成輸入。告訴webpack要使用哪個模塊作為構(gòu)建項目的起點，默認為./src/index.js

• output ：出口，告訴webpack在哪里輸出它打包好的代碼以及如何命名，默認為./dist

• Module：模塊，在 Webpack 里一切皆模塊，一個模塊對應(yīng)著一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊。

• Chunk：代碼塊，一個 Chunk 由多個模塊組合而成，用于代碼合并與分割。

• Loader：模塊轉(zhuǎn)換器，用于把模塊原內(nèi)容按照需求轉(zhuǎn)換成新內(nèi)容。

• Plugin：擴展插件，在 Webpack 構(gòu)建流程中的特定時機會廣播出對應(yīng)的事件，插件可以監(jiān)聽這些事件的發(fā)生，在特定時機做對應(yīng)的事情。

5、Webpack的基本功能有哪些？

• 代碼轉(zhuǎn)換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等等

• 文件優(yōu)化：壓縮 JavaScript、CSS、html 代碼，壓縮合并圖片等

• 代碼分割：提取多個頁面的公共代碼、提取首屏不需要執(zhí)行部分的代碼讓其異步加載

• 模塊合并：在采用模塊化的項目有很多模塊和文件，需要構(gòu)建功能把模塊分類合并成一個文件

• 自動刷新：監(jiān)聽本地源代碼的變化，自動構(gòu)建，刷新瀏覽器

• 代碼校驗：在代碼被提交到倉庫前需要檢測代碼是否符合規(guī)范，以及單元測試是否通過

• 自動發(fā)布：更新完代碼后，自動構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)。

6、gulp/grunt 與 webpack的區(qū)別是什么?

三者都是前端構(gòu)建工具，grunt和gulp在早期比較流行，現(xiàn)在webpack相對來說比較主流，不過一些輕量化的任務(wù)還是會用gulp來處理，比如單獨打包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來擴展webpack功能。

7、webpack是解決什么問題而生的?

如果像以前開發(fā)時一個html文件可能會引用十幾個js文件,而且順序還不能亂，因為它們存在依賴關(guān)系，同時對于ES6+等新的語法，less, sass等CSS預(yù)處理都不能很好的解決……，此時就需要一個處理這些問題的工具。

8、你是如何提高webpack構(gòu)件速度的?

多入口情況下，使用CommonsChunkPlugin來提取公共代碼

通過externals配置來提取常用庫

利用DllPlugin和DllReferencePlugin預(yù)編譯資源模塊通過DllPlugin來對那些我們

引用但是絕對不會修改的npm包來進行預(yù)編譯，再通過DllReferencePlugin將預(yù)編譯的模塊加載進來。

使用Happypack 實現(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)上進行學(xué)習(xí)，這里只講解如何利用webpack來構(gòu)建。

NPM模塊需要注意以下問題：

1. 要支持CommonJS模塊化規(guī)范，所以要求打包后的最后結(jié)果也遵守該規(guī)則。
2. Npm模塊使用者的環(huán)境是不確定的，很有可能并不支持ES6，所以打包的最后結(jié)果應(yīng)該是采用ES5編寫的。并且如果ES5是經(jīng)過轉(zhuǎn)換的，請最好連同SourceMap一同上傳。
3. Npm包大小應(yīng)該是盡量?。ㄓ行﹤}庫會限制包大?。?/span>
4. 發(fā)布的模塊不能將依賴的模塊也一同打包，應(yīng)該讓用戶選擇性的去自行安裝。這樣可以避免模塊應(yīng)用者再次打包時出現(xiàn)底層模塊被重復(fù)打包的情況。
5. UI組件類的模塊應(yīng)該將依賴的其它資源文件，例如.css文件也需要包含在發(fā)布的模塊里。

10、前端為什么要進行打包和構(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 的運行流程是一個串行的過程，從啟動到結(jié)束會依次執(zhí)行以下流程：

• 初始化參數(shù)：從配置文件和 Shell 語句中讀取與合并參數(shù)，得出最終的參數(shù)；

• 開始編譯：用上一步得到的參數(shù)初始化 Compiler 對象，加載所有配置的插件，執(zhí)行對象的 run 方法開始執(zhí)行編譯；

• 確定入口：根據(jù)配置中的 entry 找出所有的入口文件；

• 編譯模塊：從入口文件出發(fā)，調(diào)用所有配置的 Loader 對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理；

• 完成模塊編譯：在經(jīng)過第4步使用 Loader 翻譯完所有模塊后，得到了每個模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系；

• 輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個個包含多個模塊的 Chunk，再把每個 Chunk 轉(zhuǎn)換成一個單獨的文件加入到輸出列表，這步是可以修改輸出內(nèi)容的最后機會；

• 輸出完成：在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和文件名，把文件內(nèi)容寫入到文件系統(tǒng)。

在以上過程中，Webpack 會在特定的時間點廣播出特定的事件，插件在監(jiān)聽到感興趣的事件后會執(zhí)行特定的邏輯，并且插件可以調(diào)用 Webpack 提供的 API 改變 Webpack 的運行結(jié)果。

12、怎么配置單頁應(yīng)用？怎么配置多頁應(yīng)用？

單頁應(yīng)用可以理解為webpack的標(biāo)準(zhǔn)模式，直接在entry中指定單頁應(yīng)用的入口即可，這里不再贅述

多頁應(yīng)用的話，可以使用webpack的 AutoWebPlugin來完成簡單自動化的構(gòu)建，但是前提是項目的目錄結(jié)構(gòu)必須遵守他預(yù)設(shè)的規(guī)范。多頁應(yīng)用中要注意的是：

• 每個頁面都有公共的代碼，可以將這些代碼抽離出來，避免重復(fù)的加載。比如，每個頁面都引用了同一套css樣式表
• 隨著業(yè)務(wù)的不斷擴展，頁面可能會不斷的追加，所以一定要讓入口的配置足夠靈活，避免每次添加新頁面還需要修改構(gòu)建配置

13、Loader機制的作用是什么？

webpack默認只能打包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 是用來擴展 Webpack 功能的，通過在構(gòu)建流程里注入鉤子實現(xiàn)，它給 Webpack 帶來了很大的靈活性。

Webpack 是通過plugins屬性來配置需要使用的插件列表的。plugins屬性是一個數(shù)組，里面的每一項都是插件的一個實例，在實例化一個組件時可以通過構(gòu)造函數(shù)傳入這個組件支持的配置屬性。

16、什么是bundle，什么是chunk，什么是module

bundle：是由webpack打包出來的文件

chunk：是指webpack在進行模塊依賴分析的時候，代碼分割出來的代碼塊

module：是開發(fā)中的單個模塊

17、常見Plugins

HtmlWbpackPlugin自動在打包結(jié)束后生成html文件，并引入bundle.js
cleanwebPackPlugin打包自動刪除上次打包文件

18、ExtractTextPlugin插件的作用

ExtractTextPlugin插件的作用是提取出 JavaScript 代碼里的 CSS 到一個單獨的文件。

對此你可以通過插件的filename屬性，告訴插件輸出的 CSS 文件名稱是通過[name]_[contenthash:8].css字符串模版生成的，里面的[name]代表文件名稱，[contenthash:8]代表根據(jù)文件內(nèi)容算出的8位 hash 值， 還有很多配置選項可以在ExtractTextPlugin的主頁上查到。

19、sourceMap

是一個映射關(guān)系，將打包后的文件隱射到源代碼，用于定位報錯位置

配置方式:

例如：devtool：‘source-map’
加不同前綴意義：

• inline:不生成映射關(guān)系文件，打包進main.js

• cheap: 1.只精確到行，不精確到列，打包速度快 2.只管業(yè)務(wù)代碼，不管第三方模塊

• module：不僅管業(yè)務(wù)代碼，而且管第三方代碼

• eval:執(zhí)行效率最快，性能最好

最佳實踐：
開發(fā)環(huán)境：cheap-module-eval-source-map
線上環(huán)境：cheap-mudole-source-map

20、HMR熱模塊更新

借助webpack.HotModuleReplacementPlugin()，devServer開啟hot

場景1：實現(xiàn)只刷新css，不影響js
場景2：js中實現(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 選項，為當(dāng)前 entry 構(gòu)建一個 library。

• runtime: 運行時 chunk 的名字。如果設(shè)置了，就會創(chuàng)建一個新的運行時 chunk。在 webpack 5.43.0 之后可將其設(shè)為 false 以避免一個新的運行時 chunk。

• publicPath: 當(dāng)該入口的輸出文件在瀏覽器中被引用時，為它們指定一個公共 URL 地址

22、babel 相關(guān): polyfill 以及 runtime 區(qū)別， ES stage 含義，preset–env 作用等等

1.polyfill 以及 runtime 區(qū)別

babel-polyfill 的原理是當(dāng)運行環(huán)境中并沒有實現(xiàn)的一些方法，babel-polyfill會做兼容。

babel-runtime 它是將es6編譯成es5去執(zhí)行。我們使用es6的語法來編寫，最終會通過babel-runtime編譯成es5.也就是說，不管瀏覽器是否支持ES6，只要是ES6的語法，它都會進行轉(zhuǎn)碼成ES5.所以就有很多冗余的代碼。

babel-polyfill 它是通過向全局對象和內(nèi)置對象的prototype上添加方法來實現(xiàn)的。比如運行環(huán)境中不支持Array.prototype.find 方法，引入polyfill, 我們就可以使用es6方法來編寫了，但是缺點就是會造成全局空間污染。

babel-runtime: 它不會污染全局對象和內(nèi)置對象的原型，比如說我們需要Promise，我們只需要import Promise from 'babel-runtime/core-js/promise'即可，這樣不僅避免污染全局對象，而且可以減少不必要的代碼。

2.stage-x：指處于某一階段的js語言提案
Stage 0 - 設(shè)想（Strawman）：只是一個想法，可能有 Babel插件。
Stage 1 - 建議（Proposal）：這是值得跟進的。
Stage 2 - 草案（Draft）：初始規(guī)范。
Stage 3 - 候選（Candidate）：完成規(guī)范并在瀏覽器上初步實現(xiàn)。
Stage 4 - 完成（Finished）：將添加到下一個年度版本發(fā)布中。

3. 理解 babel-preset-env
babel-preset-es2015: 可以將es6的代碼編譯成es5.
babel-preset-es2016: 可以將es7的代碼編譯為es6.
babel-preset-es2017: 可以將es8的代碼編譯為es7.
babel-preset-latest: 支持現(xiàn)有所有ECMAScript版本的新特性

23、什么是模熱更新？有什么優(yōu)點？

模塊熱更新是webpack的一個功能，它可以使得代碼修改之后，不用刷新瀏覽器就可以更新。

在應(yīng)用過程中替換添加刪出模塊，無需重新加載整個頁面，是高級版的自動刷新瀏覽器。

優(yōu)點：只更新變更內(nèi)容，以節(jié)省寶貴的開發(fā)時間。調(diào)整樣式更加快速，幾乎相當(dāng)于在瀏覽器中更改樣式

24、lazy loading（模塊懶加載）

借助import()語法異步引入組件，實現(xiàn)文件懶加載：prefetch,preloading
webpack提倡多寫異步代碼，提升代碼利用率，從而提升頁面性能
先加載主業(yè)務(wù)文件，prefetch利用網(wǎng)絡(luò)空閑時間，異步加載組件

import(/* webpackPrefetch: true / ‘LoginModal’);

preload和主業(yè)務(wù)文件一起加載，異步加載組件

import(/ webpackPreload: true */ ‘ChartingLibrary’);

25、什么是長緩存？在webpack中如何做到長緩存優(yōu)化？

瀏覽器在用戶訪問頁面的時候，為了加快加載速度，會對用戶訪問的靜態(tài)資源進行存儲，但是每一次代碼升級或者更新，都需要瀏覽器去下載新的代碼，最方便和最簡單的更新方式就是引入新的文件名稱。

在webpack中，可以在output給出輸出的文件制定chunkhash，并且分離經(jīng)常更新的代碼和框架代碼，通過NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不變。

26、什么是Tree-sharking?

指打包中去除那些引入了但在代碼中沒用到的死代碼。在wepack中js treeshaking通過UglifyJsPlugin來進行，css中通過purify-CSS來進行。

27、webpack-dev-server 和 http服務(wù)器的區(qū)別

webpack-dev-server使用內(nèi)存來存儲webpack開發(fā)環(huán)境下的打包文件，并且可以使用模塊熱更新，比傳統(tǒng)的http服務(wù)對開發(fā)更加有效。

28、webpack3和webpack4的區(qū)別

mode/–mode參數(shù)，新增了mode/–mode參數(shù)來表示是開發(fā)還是生產(chǎn)（development/production）production 側(cè)重于打包后的文件大小，development側(cè)重于goujiansud移除loaders，必須使用rules（在3版本的時候loaders和rules 是共存的但是到4的時候只允許使用rules）移除了CommonsChunkPlugin (提取公共代碼)，用optimization.splitChunks和optimization.runtimeChunk來代替支持es6的方式導(dǎo)入JSON文件，并且可以過濾無用的代碼

學(xué)習(xí)更多技能

請點擊下方公眾號