1. webpack3和webpack4的區(qū)別
1.1. mode/–mode參數(shù)
新增了mode/--mode參數(shù)來表示是開發(fā)還是生產(chǎn)（development/production）
production 側(cè)重于打包后的文件大小峦椰，development側(cè)重于goujiansud
1.2. 移除loaders失仁，必須使用rules（在3版本的時候loaders和rules 是共存的但是到4的時候只允許使用rules）
1.3. 移除了CommonsChunkPlugin (提取公共代碼)，用optimization.splitChunks和optimization.runtimeChunk來代替
1.4. 支持es6的方式導(dǎo)入JSON文件们何，并且可以過濾無用的代碼
let jsonData = require('./data.json')
import jsonData from './data.json'
import { first } from './data.json' // 打包時只會把first相關(guān)的打進去
1.5. 升級happypack插件（happypack可以進行多線程加速打包）
1.6. ExtractTextWebpackPlugin調(diào)整萄焦，建議選用新的CSS文件提取kiii插件mini-css-extract-plugin，production模式，增加 minimizer
2. loader 和 plugin 不同
2.1. loader是使wenbpack擁有加載和解析非js文件的能力
2.2. plugin 可以擴展webpack的功能拂封，使得webpack更加靈活茬射。可以在構(gòu)建的過程中通過webpack的api改變輸出的結(jié)果
3. webpack構(gòu)建流程
3.1. 初始化參數(shù)冒签，從配置文件和shell語句中讀到的參數(shù)合并在抛，得到最后的參數(shù)
3.2. 開始編譯：用合并得到的參數(shù)初始化complier對象，加載是所有配置的插件萧恕，執(zhí)行run方法開始編譯
3.3. 確定入口刚梭，通過entry找到入口文件
3.4. 編譯模塊，從入口文件出發(fā)票唆，調(diào)用所有配置的loader對模塊進行解析翻譯朴读，在找到該模塊依賴的模塊進行處理
3.5. 完成模塊編譯，得到每個模塊被翻譯之后的最終的內(nèi)容和依賴關(guān)系
3.6. 輸出資源走趋，根據(jù)入口和模塊之間的依賴關(guān)系衅金，組裝成一個個包含多個模塊的chunk，在把每個chunk轉(zhuǎn)換成一個單獨的文件加載到輸出列表
3.7. 輸出完成簿煌，確定輸出的路徑和文件名氮唯，把內(nèi)容寫到文件系統(tǒng)中
在以上過程中，webpack會在特定的時間點廣播出特定的事件姨伟，插件在艦艇感興趣的事件后會執(zhí)行特定的邏輯惩琉，改變webpack的運行結(jié)果
4. webpack 熱加載執(zhí)行原理
？夺荒？瞒渠？？
5. 如何利用webpack來優(yōu)化前端性能
5.1. 壓縮代碼般堆。uglifyJsPlugin 壓縮js代碼， mini-css-extract-plugin 壓縮css代碼
5.2. 利用CDN加速诚啃，將引用的靜態(tài)資源修改為CDN上對應(yīng)的路徑淮摔，可以利用webpack對于output參數(shù)和loader的publicpath參數(shù)來修改資源路徑
5.3. 刪除死代碼（tree shaking），css需要使用Purify-CSS
5.4. 提取公共代碼始赎。webpack4移除了CommonsChunkPlugin (提取公共代碼)和橙，用optimization.splitChunks和optimization.runtimeChunk來代替
6. 什么是bundle,什么是chunk，什么是module?
bundle:有webpack打包出來的文件
chunk：webpack在進行模塊的依賴分析的時候造垛，代碼分割出來的代碼塊
module:開發(fā)中的單個模塊
7. webpack-dev-server和http服務(wù)器如nginx有什么區(qū)別?
webpack-dev-server使用內(nèi)存來存儲webpack開發(fā)環(huán)境下的打包文件魔招，并且可以使用模塊熱更新，他比傳統(tǒng)的http服務(wù)對開發(fā)更加簡單高效五辽。
8. DefinePlugin
DefinePlugin ：允許創(chuàng)建一個在編譯時可以配置的全局變量
9. DllPlugin
使用DllPlugin可以減少基礎(chǔ)模塊編譯次數(shù)办斑，動態(tài)鏈接庫插件，其原理是吧網(wǎng)頁依賴的基礎(chǔ)模塊抽離出來打包到dll文件中，當(dāng)需要導(dǎo)入的模塊存在于某個dll中時乡翅，這個模塊不再被打包鳞疲，而是去dll中獲取。在dll中大多包含的時常用的第三方模塊蠕蚜，只要這些模塊版本不升級尚洽，就只需要被編譯一次。
注意
DllPlugin參數(shù)中的name必須要和output.library值保持一致靶累，并且生成的mainfest文件中會引用output.library值
10. happyPack開啟多線程loader轉(zhuǎn)換
運行在node.js之上的webpack時單線程模型腺毫，也就是只能一個一個文件進行處理，不能并行處理挣柬，happypack可以將任務(wù)分解給多個子進程潮酒，最后將結(jié)果發(fā)給主進程，js是單線程模型凛忿，只能通過這種多線程的方式提高性能
參考文件：
https://segmentfault.com/a/1190000015883378
作者：月半女那
鏈接：http://www.reibang.com/p/e80d38661358
來源：簡書
著作權(quán)歸作者所有澈灼。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處店溢。
