1、webpack的核心思想是什么椎椰?
1)entry(入口):一個可執(zhí)行模塊或者庫的入口。起點或是應用程序的起點入口沾鳄。請這個起點開始慨飘,應用程序啟動執(zhí)行。如果傳遞一個數組译荞,name數組的每一項都會執(zhí)行瓤的。動態(tài)加載的模塊不是入口起點【簡單規(guī)則:每個HTML頁面都有一個入口起點。單頁面應用(SPA):一個入口起點吞歼,多頁應用(MPA):多個入口起點】圈膏;
2)output(出口):指示webpack如何去輸出、以及在哪里輸出你的[bundle篙骡、asset和其他你所打包或使用webpack載入的任何內容]稽坤。output屬性告訴webpack在哪里輸出它所創(chuàng)建的bundles,以及如何命名這些文件糯俗,默認值為./dist尿褪。基本上得湘,整個應用程序結構杖玲,都會被編譯到你指定的輸出路徑的文件夾中;
3)Loader(加載器):文件轉換器忽刽。加載器會實現(xiàn)2個目標:a天揖、識別出應該被特定的加載器轉換的文件;b跪帝、轉換能夠被添加到依賴圖標的文件(并且最終打包)今膊;
4)Plugins(插件):擴展webpack功能的插件。在webpack構建的生命周期節(jié)點上加入擴展hook伞剑,添加功能斑唬。參與整個打包過程,可以進行打包優(yōu)化配置編譯的變量等黎泣,輔助(壓縮恕刘,混淆,代碼分割等)抒倚。
2褐着、webpack和rollup有什么區(qū)別?如何選擇是使用webpack還是rollup?
webpack:拆分代碼托呕,按需加載含蓉;
Rollup:所有資源放在同一個地方频敛,一次性加載,利用tree-shake特性來剔除項目中未使用的代碼馅扣,減少冗余斟赚,但是webpack已經逐漸支持tree-shake〔钣停【https://rollupjs.org/guide/en/】
webpack相對來說擁有更大的社區(qū)支持拗军,資源更加齊全,文檔更加完整蓄喇,有更完整的插件庫发侵,如熱更新及web-server等;
結論
對于應用使用webpack公罕,對于類庫使用Rollup
如果你需要代碼拆分(Code Splitting)器紧,或者你有很多靜態(tài)資源需要處理,再或者你構建的項目需要引入很多CommonJS模塊的依賴楼眷,那么webpack是個很不錯的選擇铲汪。
如果你的代碼庫是基于ES2015模塊的,而且希望你寫的代碼能夠被他人直接使用罐柳,你需要的打包工具可能是Rollup掌腰。
3、webpack中的resolve.modules和resolve.alias有什么區(qū)別张吉?
resolve.alias:創(chuàng)建import或require的別名齿梁,來確保模塊引入變的更簡單。
resolve.modules:告訴webpack解析模塊時應該搜索的目錄肮蛹。絕對路徑和相對路徑都能使用勺择,但是要知道它們之間有一點差異。相對路徑:通過查看當前目錄以及祖先路徑(即:./node-modules伦忠,../node-modules等等)省核,類似于Node查找‘node-modules’查找。絕對路徑:只在給定目錄中搜索昆码。
4气忠、webpack是如何處理模塊化的?
模塊:在模塊化編程中赋咽,開發(fā)者講程序分解為功能離散的chunk旧噪,稱之為模塊。
webpack是通過模擬module脓匿,exports淘钟, require變量,將我們的模塊代碼打包成一個文件陪毡,讓瀏覽器可以運行我們的模塊代碼日月。