【前端面試題】08—31道有關(guān)前端工程化的面試題(附答案)
{"name"："Project"，"version"：" 0.0.1"}
13、WebPack和 gulp/grunt相比有什么特性？
gulp/ grunt是一種能夠優(yōu)化前端的流程開發(fā)工具，而 Web Pack是一種模塊化的解決方案，由于 WebPack提供的功能越來越豐富，使得 WebPack可以代替 gulp/grunt類的工具。
14、grunt和gulp的工作方式是什么？
在一個配置文件中，指明對某些文件進行何種編譯、組合、壓縮等任務(wù)的具體步驟，當(dāng)運行這些工具的指令的時候，就可以自動完成這些任務(wù)。
15、WebPack的工作方式是什么？
把項目當(dāng)作一個整體，通過一個給定的主文件（如 index. js）， WebPack將從這個文件開始找到你項目的所有依賴，并使用 loader（加載器）來處理它們，最后打包為個瀏覽器可識別的 JavaScript文件。
16、Babe通過編譯能達到什么目的？
能達到以下目的。
（1）使用下一代的 JavaScript標(biāo)準(zhǔn)（ EMAScript 6、 EMAScript 7）語法，當(dāng)前的瀏覽器尚不完全支持這些標(biāo)準(zhǔn)。
（2）使用基于 JavaScript進行拓展的語言，比如 React的jsx語法。
17、EventSource和 websocket的區(qū)別是什么？
區(qū)別如下。
EventSource本質(zhì)仍然是HTTP，僅提供服務(wù)器端到瀏覽器端的單向文本傳輸，不需要心跳鏈接，鏈接斷開會持續(xù)重發(fā)鏈接。
注意：心跳鏈接是用來檢測一個系統(tǒng)是否存活或者網(wǎng)絡(luò)鏈路是否通暢的一種方式。
（2） websocket是基于TCP的協(xié)議，提供雙向數(shù)據(jù)傳輸，支持二進制，需要心跳鏈接，斷開鏈接時不會重鏈。
（3） EventSource更簡潔輕量， websocket支持性更妤，后者功能更強大一點。
18、在工作中， WebPack工具中常用到的插件有哪些？
常用到的插件如下
（1） HtmlWebpackPlugin：依據(jù)一個HTML模板，生成HTML文件，并將打包后的資源文件自動引入。
（2） commonsChunkPlugin：抽取公共模塊，減小包占用的內(nèi)存空間，例如vue的源碼、 jQuery的源碼等。
（3） css-loader：解析CSS文件依賴，在 JavaScript中通過 require方式引入CSS文件。
（4） style- loader.：通過 style標(biāo)簽引入CSS。
（5） extract-text-webpack- plugin：將樣式抽取成單獨的文件。
（6）url- loader：實現(xiàn)圖片文字等資源的打包，limit選項定義大小限制，如果小于該限制，則打包成base64編碼格式；如果大于該限制，就使用file- loader去打包成圖片。
（7） hostess：實現(xiàn)瀏覽器兼容。
（8） babel：將 JavaScript未來版本（ EMAScript6、 EMAScript2016等）轉(zhuǎn)換成當(dāng)前瀏覽器支持的版本。
（9） hot module replacement：修改代碼后，自動刷新、實時預(yù)覽修改后的效果
（10） ugliifyJsPlugin：壓縮 JavaScript代碼。
19、WebPack與gulp的區(qū)別是什么？
區(qū)別如下。
（1）用途不同。gulp是工具鏈，可以配合各種插件使用，例如對 JavaScript、CSS文件進行壓縮，對less進行編譯等；而 WebPack能把項目中的各種 JavaScript、CSS文件等打包合并成一個或者多個文件，主要用于模塊化開發(fā)。
（2）側(cè)重點不同。gulp側(cè)重于整個過程的控制管理（像是流水線），通過配置不同的任務(wù)，構(gòu)建整個前端開發(fā)流程，并且gulp的打包功能是通過安裝gulp-webpack來實現(xiàn)的；WebPack則側(cè)重于模塊打包。
（3） WebPack能夠按照模塊的依賴關(guān)系構(gòu)建文件組織結(jié)構(gòu)。
20、window對象中，模塊間的依賴關(guān)系完全由文件的加載順序決定，這樣的模塊組織方式出現(xiàn)的弊端是什么？
弊端如下。
（1）全局作用域下容易造成變量沖突。
（2）文件只能按照< script>的書寫順序進行加載
（3）開發(fā)人員需要自己解決模塊代碼庫的依賴關(guān)系。
（4）在大型項目中這樣的加載方式會導(dǎo)致文件冗長而難以管理。
21、如何用 webpack-dev- server監(jiān)控文件編譯？
打開多個控制臺，用 webpack--watch實時監(jiān)控文件變動，并隨時編譯。
22、如何修改 webpack-dev- server的端口？
用--port修改端口號，如 webpack-dev-server--port888。
23、publicPath是什么？
在 WebPack自動生成資源路徑時，比如由于 WebPack異步加載分包而需要獨立出來的塊，或者打包CSS時， WebPack自動替換掉的圖片、字體文件，又或者使用html-webpack-plugin后 WebPack自動加載的入口文件等，這些 WebPack生成的路徑都會參考 publicPath參數(shù)。不需要關(guān)注CDN，需要關(guān)注的是，文件發(fā)布出來后，應(yīng)該部署到哪里。如果文件是與頁面放到一起的，那么可以按相對路徑來設(shè)置，比如'./'之類的；而如果 JavaScript、CSS文件用于存放CDN，當(dāng)然就要填寫CDN的域名和路徑。
24、export、 export default和 module.export的區(qū)別是什么？
export、 export default都屬于 EMAScript 6 模塊化開發(fā)規(guī)范。
export和 export default的區(qū)別如下。
在同一個文件里面可以有多個 export，一個文件里面只能有1個 export default。
使用 import引入的方式也有點區(qū)別。
在使用 export時，用 import引入的相應(yīng)模塊名字一定要和定義的名字一樣；而在使用 export default時，用 import引入的模塊名字可以不一樣。
module. export屬于 CommonJS語法規(guī)范。
25、當(dāng)使用Babel直接打包的 JavaScript文件中含有jsx語法的時候會報錯，如何解決這個問題？
修改 package. json并添加 react，如以下代碼所示。
"babel"：{"presets"：["es2015","react","stage-o"],"plugins" ：["add-module-exports"]}
26、當(dāng)使用html- webpack- plugin時找不到指定的 template文件怎么辦？
通過以下代碼進行解決。
{test:/ \.html ？$/,loader : 'html-loader '}
也就是將以前的file-loader修改為html- loader就可以了。
27、WebPack如何切換開發(fā)環(huán)境和生產(chǎn)環(huán)境？
生產(chǎn)環(huán)境與開發(fā)環(huán)境的區(qū)別無非就是調(diào)用的接口地址、資源存放路徑、線上的資源是否需要壓縮等方面。目前的做法是通過在 package. json中設(shè)置node的一個全局變量，然后在 webpack. config. js文件里面進行生產(chǎn)環(huán)境與開發(fā)環(huán)境的配置切換。
28、WebPack的特點是什么？
特點如下：
（1）具有豐富的插件，方便程序員進行開發(fā)。
（2）具有大量的加載器，包括加載各種靜態(tài)資源。
（3）支持代碼分割，提供按需加載的能力。
（4）它是一個理想的發(fā)布工具。
29、WebPack的優(yōu)勢是什么？
優(yōu)勢如下：
（1） WebPack以 CommonJS的形式書寫腳本，對 AMD/CMD的支持也很全面，方便對舊項目進行代碼遷移
（2）絕大部分前端資源都可以模塊化。
（3）開發(fā)便捷，能替代 grunt/gulp的部分工作，如程序打包、壓縮混淆、圖片轉(zhuǎn)base64編碼等。
（4）擴展性強，插件機制完善，特別是支持 React熱插拔功能。
30、圖片處理常見的加載器有幾種？
有以下幾種。
（1）file- loader，默認情況下會根據(jù)圖片生成對應(yīng)的MD5散列的文件格式。
（2）url- loader，它類似于file- loader，但是url- loader可以根據(jù)自身文件的大小，來決定是否把轉(zhuǎn)化為base64格式的 DataUrl單獨作為文件，也可以自定義對應(yīng)的散列文件名。
（3） image- webpack- loader，提供壓縮圖片的功能。
31、WebPack命令的-- config選項有什么作用？
-- config用來指定一個配置文件，代替命令行中的選項，從而簡化命令。如果直接執(zhí)行 WebPack, WebPack會在當(dāng)前目錄下查找名為 webpack. config. js的文件。
