1. webpack3和webpack4的區(qū)別
1.1. mode/–mode參數(shù)
新增了mode/--mode參數(shù)來(lái)表示是開(kāi)發(fā)還是生產(chǎn)（development/production）
production 側(cè)重于打包后的文件大小，development側(cè)重于goujiansud
1.2. 移除loaders，必須使用rules（在3版本的時(shí)候loaders和rules 是共存的但是到4的時(shí)候只允許使用rules）
1.3. 移除了CommonsChunkPlugin (提取公共代碼)凡简，用optimization.splitChunks和optimization.runtimeChunk來(lái)代替
1.4. 支持es6的方式導(dǎo)入JSON文件司抱，并且可以過(guò)濾無(wú)用的代碼
let jsonData = require('./data.json')
import jsonData from './data.json'
import { first } from './data.json' // 打包時(shí)只會(huì)把first相關(guān)的打進(jìn)去
1.5. 升級(jí)happypack插件（happypack可以進(jìn)行多線程加速打包）
1.6. ExtractTextWebpackPlugin調(diào)整溶锭，建議選用新的CSS文件提取kiii插件mini-css-extract-plugin，production模式欺栗，增加 minimizer
2. loader 和 plugin 不同
2.1. loader是使wenbpack擁有加載和解析非js文件的能力
2.2. plugin 可以擴(kuò)展webpack的功能蚜枢，使得webpack更加靈活丁眼÷В可以在構(gòu)建的過(guò)程中通過(guò)webpack的api改變輸出的結(jié)果
3. webpack構(gòu)建流程
3.1. 初始化參數(shù)，從配置文件和shell語(yǔ)句中讀到的參數(shù)合并姥闭，得到最后的參數(shù)
3.2. 開(kāi)始編譯：用合并得到的參數(shù)初始化complier對(duì)象锅纺，加載是所有配置的插件掷空，執(zhí)行run方法開(kāi)始編譯
3.3. 確定入口，通過(guò)entry找到入口文件
3.4. 編譯模塊囤锉，從入口文件出發(fā)坦弟，調(diào)用所有配置的loader對(duì)模塊進(jìn)行解析翻譯，在找到該模塊依賴的模塊進(jìn)行處理
3.5. 完成模塊編譯官地，得到每個(gè)模塊被翻譯之后的最終的內(nèi)容和依賴關(guān)系
3.6. 輸出資源酿傍，根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個(gè)個(gè)包含多個(gè)模塊的chunk驱入，在把每個(gè)chunk轉(zhuǎn)換成一個(gè)單獨(dú)的文件加載到輸出列表
3.7. 輸出完成赤炒，確定輸出的路徑和文件名，把內(nèi)容寫(xiě)到文件系統(tǒng)中
在以上過(guò)程中沧侥，webpack會(huì)在特定的時(shí)間點(diǎn)廣播出特定的事件可霎，插件在艦艇感興趣的事件后會(huì)執(zhí)行特定的邏輯，改變webpack的運(yùn)行結(jié)果
4. webpack 熱加載執(zhí)行原理
宴杀？癣朗？？旺罢？
5. 如何利用webpack來(lái)優(yōu)化前端性能
5.1. 壓縮代碼旷余。uglifyJsPlugin 壓縮js代碼绢记， mini-css-extract-plugin 壓縮css代碼
5.2. 利用CDN加速，將引用的靜態(tài)資源修改為CDN上對(duì)應(yīng)的路徑正卧，可以利用webpack對(duì)于output參數(shù)和loader的publicpath參數(shù)來(lái)修改資源路徑
5.3. 刪除死代碼（tree shaking）蠢熄，css需要使用Purify-CSS
5.4. 提取公共代碼。webpack4移除了CommonsChunkPlugin (提取公共代碼)炉旷，用optimization.splitChunks和optimization.runtimeChunk來(lái)代替
6. 什么是bundle,什么是chunk签孔，什么是module?
bundle:有webpack打包出來(lái)的文件
chunk：webpack在進(jìn)行模塊的依賴分析的時(shí)候，代碼分割出來(lái)的代碼塊
module:開(kāi)發(fā)中的單個(gè)模塊
7. webpack-dev-server和http服務(wù)器如nginx有什么區(qū)別?
webpack-dev-server使用內(nèi)存來(lái)存儲(chǔ)webpack開(kāi)發(fā)環(huán)境下的打包文件窘行，并且可以使用模塊熱更新饥追，他比傳統(tǒng)的http服務(wù)對(duì)開(kāi)發(fā)更加簡(jiǎn)單高效。
8. DefinePlugin
DefinePlugin ：允許創(chuàng)建一個(gè)在編譯時(shí)可以配置的全局變量
9. DllPlugin
使用DllPlugin可以減少基礎(chǔ)模塊編譯次數(shù)罐盔，動(dòng)態(tài)鏈接庫(kù)插件但绕，其原理是吧網(wǎng)頁(yè)依賴的基礎(chǔ)模塊抽離出來(lái)打包到dll文件中，當(dāng)需要導(dǎo)入的模塊存在于某個(gè)dll中時(shí)惶看，這個(gè)模塊不再被打包捏顺，而是去dll中獲取。在dll中大多包含的時(shí)常用的第三方模塊纬黎，只要這些模塊版本不升級(jí)幅骄，就只需要被編譯一次。
注意
DllPlugin參數(shù)中的name必須要和output.library值保持一致本今，并且生成的mainfest文件中會(huì)引用output.library值
10. happyPack開(kāi)啟多線程loader轉(zhuǎn)換
運(yùn)行在node.js之上的webpack時(shí)單線程模型昌执，也就是只能一個(gè)一個(gè)文件進(jìn)行處理，不能并行處理诈泼，happypack可以將任務(wù)分解給多個(gè)子進(jìn)程懂拾，最后將結(jié)果發(fā)給主進(jìn)程，js是單線程模型铐达，只能通過(guò)這種多線程的方式提高性能
參考文件：
https://segmentfault.com/a/1190000015883378
11.vite
vite 岖赋，是一種新型前端構(gòu)建工具
其作用類似webpack+ webpack-dev-server，其特點(diǎn)如下：
- 快速的冷啟動(dòng)
- 即時(shí)的模塊熱更新
- 真正的按需編譯
vite會(huì)直接啟動(dòng)開(kāi)發(fā)服務(wù)器瓮孙，不需要進(jìn)行打包操作唐断，也就意味著不需要分析模塊的依賴、不需要編譯杭抠，因此啟動(dòng)速度非沉掣剩快
利用現(xiàn)代瀏覽器支持ES Module的特性，當(dāng)瀏覽器請(qǐng)求某個(gè)模塊的時(shí)候偏灿，再根據(jù)需要對(duì)模塊的內(nèi)容進(jìn)行編譯丹诀，這種方式大大縮短了編譯時(shí)間
冷啟動(dòng)：當(dāng)啟動(dòng)應(yīng)用時(shí)，后臺(tái)沒(méi)有該應(yīng)用的進(jìn)程，這時(shí)系統(tǒng)會(huì)重新創(chuàng)建一個(gè)新的進(jìn)程分配給該應(yīng)用铆遭，這個(gè)啟動(dòng)方式就是冷啟動(dòng)硝桩。
