不廢話仆潮，面試題呈上：
面試題：你了解webpack原理么检盼？你項(xiàng)目中用webpack做了哪些配置？loader和plugin有什么區(qū)別颁独？項(xiàng)目中用到哪些loader彩届？
【Loader】：用于對(duì)模塊源碼的轉(zhuǎn)換，loader描述了webpack如何處理非javascript模塊誓酒，并且在buld中引入這些依賴樟蠕。loader可以將文件從不同的語(yǔ)言（如TypeScript）轉(zhuǎn)換為JavaScript，或者將內(nèi)聯(lián)圖像轉(zhuǎn)換為data URL靠柑。比如說(shuō)：CSS-Loader寨辩，Style-Loader等。
loader的使用很簡(jiǎn)單：
在webpack.config.js中指定loader歼冰。module.rules可以指定多個(gè)loader靡狞，對(duì)項(xiàng)目中的各個(gè)loader有個(gè)全局概覽。
loader是運(yùn)行在NodeJS中隔嫡，可以用options對(duì)象進(jìn)行配置甸怕。plugin可以為loader帶來(lái)更多特性。loader可以進(jìn)行壓縮腮恩，打包蕾各，語(yǔ)言翻譯等等。
loader從模板路徑解析庆揪，npm install node_modules。也可以自定義loader妨托，命名XXX-loader缸榛。
語(yǔ)言類的處理器loader：CoffeeScript，TypeScript兰伤，ESNext（Bable）,Sass,Less,Stylus内颗。任何開(kāi)發(fā)技術(shù)棧都可以使用webpack。
【Plugin】：目的在于解決loader無(wú)法實(shí)現(xiàn)的其他事敦腔，從打包優(yōu)化和壓縮均澳，到重新定義環(huán)境變量，功能強(qiáng)大到可以用來(lái)處理各種各樣的任務(wù)符衔。webpack提供了很多開(kāi)箱即用的插件：CommonChunkPlugin主要用于提取第三方庫(kù)和公共模塊找前，避免首屏加載的bundle文件，或者按需加載的bundle文件體積過(guò)大判族，導(dǎo)致加載時(shí)間過(guò)長(zhǎng)躺盛，是一把優(yōu)化的利器。而在多頁(yè)面應(yīng)用中形帮，更是能夠?yàn)槊總€(gè)頁(yè)面間的應(yīng)用程序共享代碼創(chuàng)建bundle槽惫。
webpack功能強(qiáng)大周叮，難點(diǎn)在于它的配置文件，webpack4默認(rèn)不需要配置文件界斜，可以通過(guò)mode選項(xiàng)為webpack指定了一些默認(rèn)的配置仿耽，mode分為：development/production，默認(rèn)是production各薇。
插件可以攜帶參數(shù)项贺，所以在plugins屬性傳入new實(shí)例。
【Mode】可以在config文件里面配置得糜，也可以在CLI參數(shù)中配置：webpack --mode=production（一般會(huì)選擇在CLI敬扛，也就是npm scripts里面進(jìn)行配置）。
在webpack4以下版本朝抖，webpack3.XX啥箭，通過(guò)plugins進(jìn)行環(huán)境變量的配置。
【resolve】模塊治宣，resolver是個(gè)庫(kù)急侥，幫助webpack找到bundle需要引入的模塊代碼，打包時(shí)侮邀，webpack使用enhanced-resolve來(lái)解析路徑坏怪。
resolve:{extensions:['.js','.vue','.json'],alias:{'vue$':'vue/dist/vue.esm.js','@':resolve('src'),}}
【Manifest】管理所有模塊之間的交互。runtime將能夠查詢模塊標(biāo)識(shí)符绊茧，檢索出背后對(duì)應(yīng)的模塊铝宵。
問(wèn)題1：webpack通過(guò)使用bundle計(jì)算content hash作為文件名稱，文件修改华畏，新的content hash執(zhí)向新的文件鹏秋，緩存無(wú)效，但是文件內(nèi)容沒(méi)有修改亡笑，計(jì)算的hash還是會(huì)改變侣夷，因?yàn)椋瑀untime和manifest的注入在每次構(gòu)建都會(huì)發(fā)生變化仑乌。要想解決這個(gè)文件可以了解更多的runtime和manifest百拓。
webpack原理：從配置文件定義的模塊列表開(kāi)始，處理應(yīng)用程序晰甚，從入口文件開(kāi)始遞歸構(gòu)建一個(gè)依賴圖衙传，然后將所有模塊打包為少量的bundle，通常只有一個(gè)厕九，可由瀏覽器加載粪牲。
原文：https://www.cnblogs.com/tangjiao/p/10429645.html
