{"name"："Project"， "version"：" 0.0.1"}

13、WebPack和 gulp/grunt相比有什么特性？

gulp/ grunt是一種能夠優(yōu)化前端的流程開(kāi)發(fā)工具，而 Web Pack是一種模塊化的解決方案，由于 WebPack提供的功能越來(lái)越豐富，使得 WebPack可以代替 gulp/grunt類的工具。

14、grunt和gulp的工作方式是什么？

在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行何種編譯、組合、壓縮等任務(wù)的具體步驟，當(dāng)運(yùn)行這些工具的指令的時(shí)候，就可以自動(dòng)完成這些任務(wù)。

15、WebPack的工作方式是什么？

把項(xiàng)目當(dāng)作一個(gè)整體，通過(guò)一個(gè)給定的主文件（如 index. js）， WebPack將從這個(gè)文件開(kāi)始找到你項(xiàng)目的所有依賴，并使用 loader（加載器）來(lái)處理它們，最后打包為個(gè)瀏覽器可識(shí)別的 JavaScript文件。

16、Babe通過(guò)編譯能達(dá)到什么目的？

能達(dá)到以下目的。

（1）使用下一代的 JavaScript標(biāo)準(zhǔn)（ EMAScript 6、 EMAScript 7）語(yǔ)法，當(dāng)前的瀏覽器尚不完全支持這些標(biāo)準(zhǔn)。

（2）使用基于 JavaScript進(jìn)行拓展的語(yǔ)言，比如 React的jsx語(yǔ)法。

17、EventSource和 websocket的區(qū)別是什么？

區(qū)別如下。

EventSource本質(zhì)仍然是HTTP，僅提供服務(wù)器端到瀏覽器端的單向文本傳輸，不需要心跳鏈接，鏈接斷開(kāi)會(huì)持續(xù)重發(fā)鏈接。

注意：心跳鏈接是用來(lái)檢測(cè)一個(gè)系統(tǒng)是否存活或者網(wǎng)絡(luò)鏈路是否通暢的一種方式。

（2） websocket是基于TCP的協(xié)議，提供雙向數(shù)據(jù)傳輸，支持二進(jìn)制，需要心跳鏈接，斷開(kāi)鏈接時(shí)不會(huì)重鏈。

（3） EventSource更簡(jiǎn)潔輕量， websocket支持性更妤，后者功能更強(qiáng)大一點(diǎn)。

18、在工作中， WebPack工具中常用到的插件有哪些？

常用到的插件如下

（1） HtmlWebpackPlugin：依據(jù)一個(gè)HTML模板，生成HTML文件，并將打包后的資源文件自動(dòng)引入。

（2） commonsChunkPlugin：抽取公共模塊，減小包占用的內(nèi)存空間，例如vue的源碼、 jQuery的源碼等。

（3） css-loader：解析CSS文件依賴，在 JavaScript中通過(guò) require方式引入CSS文件。

（4） style- loader.：通過(guò) style標(biāo)簽引入CSS。

（5） extract-text-webpack- plugin：將樣式抽取成單獨(dú)的文件。

（6）url- loader：實(shí)現(xiàn)圖片文字等資源的打包，limit選項(xiàng)定義大小限制，如果小于該限制，則打包成base64編碼格式；如果大于該限制，就使用file- loader去打包成圖片。

（7） hostess：實(shí)現(xiàn)瀏覽器兼容。

（8） babel：將 JavaScript未來(lái)版本（ EMAScript6、 EMAScript2016等）轉(zhuǎn)換成當(dāng)前瀏覽器支持的版本。

（9） hot module replacement：修改代碼后，自動(dòng)刷新、實(shí)時(shí)預(yù)覽修改后的效果

（10） ugliifyJsPlugin：壓縮 JavaScript代碼。

19、WebPack與gulp的區(qū)別是什么？

區(qū)別如下。

（1）用途不同。gulp是工具鏈，可以配合各種插件使用，例如對(duì) JavaScript、CSS文件進(jìn)行壓縮，對(duì)less進(jìn)行編譯等；而 WebPack能把項(xiàng)目中的各種 JavaScript、CSS文件等打包合并成一個(gè)或者多個(gè)文件，主要用于模塊化開(kāi)發(fā)。

（2）側(cè)重點(diǎn)不同。gulp側(cè)重于整個(gè)過(guò)程的控制管理（像是流水線），通過(guò)配置不同的任務(wù)，構(gòu)建整個(gè)前端開(kāi)發(fā)流程，并且gulp的打包功能是通過(guò)安裝gulp-webpack來(lái)實(shí)現(xiàn)的；WebPack則側(cè)重于模塊打包。

（3） WebPack能夠按照模塊的依賴關(guān)系構(gòu)建文件組織結(jié)構(gòu)。

20、window對(duì)象中，模塊間的依賴關(guān)系完全由文件的加載順序決定，這樣的模塊組織方式出現(xiàn)的弊端是什么？

弊端如下。

（1）全局作用域下容易造成變量沖突。

（2）文件只能按照< script>的書(shū)寫(xiě)順序進(jìn)行加載

（3）開(kāi)發(fā)人員需要自己解決模塊代碼庫(kù)的依賴關(guān)系。

（4）在大型項(xiàng)目中這樣的加載方式會(huì)導(dǎo)致文件冗長(zhǎng)而難以管理。

21、如何用 webpack-dev- server監(jiān)控文件編譯？

打開(kāi)多個(gè)控制臺(tái)，用 webpack--watch實(shí)時(shí)監(jiān)控文件變動(dòng)，并隨時(shí)編譯。

22、如何修改 webpack-dev- server的端口？

用--port修改端口號(hào)，如 webpack-dev-server--port888。

23、publicPath是什么？

在 WebPack自動(dòng)生成資源路徑時(shí)，比如由于 WebPack異步加載分包而需要獨(dú)立出來(lái)的塊，或者打包CSS時(shí)， WebPack自動(dòng)替換掉的圖片、字體文件，又或者使用html-webpack-plugin后 WebPack自動(dòng)加載的入口文件等，這些 WebPack生成的路徑都會(huì)參考 publicPath參數(shù)。不需要關(guān)注CDN，需要關(guān)注的是，文件發(fā)布出來(lái)后，應(yīng)該部署到哪里。如果文件是與頁(yè)面放到一起的，那么可以按相對(duì)路徑來(lái)設(shè)置，比如'./'之類的；而如果 JavaScript、CSS文件用于存放CDN，當(dāng)然就要填寫(xiě)CDN的域名和路徑。

24、export、 export default和 module.export的區(qū)別是什么？

 export、 export default都屬于 EMAScript 6 模塊化開(kāi)發(fā)規(guī)范。

export和 export default的區(qū)別如下。

在同一個(gè)文件里面可以有多個(gè) export，一個(gè)文件里面只能有1個(gè) export default。

使用 import引入的方式也有點(diǎn)區(qū)別。

在使用 export時(shí)，用 import引入的相應(yīng)模塊名字一定要和定義的名字一樣；而在使用 export default時(shí)，用 import引入的模塊名字可以不一樣。

module. export屬于 CommonJS語(yǔ)法規(guī)范。

25、當(dāng)使用Babel直接打包的 JavaScript文件中含有jsx語(yǔ)法的時(shí)候會(huì)報(bào)錯(cuò)，如何解決這個(gè)問(wèn)題？

修改 package. json并添加 react，如以下代碼所示。

"babel"：{    "presets"：[          "es2015",             "react",           "stage-o"], "plugins" ：["add-module-exports"]}

26、當(dāng)使用html- webpack- plugin時(shí)找不到指定的 template文件怎么辦？

通過(guò)以下代碼進(jìn)行解決。

{test:/ \.html ？$/,loader : 'html-loader '}

也就是將以前的file-loader修改為html- loader就可以了。

27、WebPack如何切換開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境？

生產(chǎn)環(huán)境與開(kāi)發(fā)環(huán)境的區(qū)別無(wú)非就是調(diào)用的接口地址、資源存放路徑、線上的資源是否需要壓縮等方面。目前的做法是通過(guò)在 package. json中設(shè)置node的一個(gè)全局變量，然后在 webpack. config. js文件里面進(jìn)行生產(chǎn)環(huán)境與開(kāi)發(fā)環(huán)境的配置切換。

28、WebPack的特點(diǎn)是什么？

特點(diǎn)如下：

（1）具有豐富的插件，方便程序員進(jìn)行開(kāi)發(fā)。

（2）具有大量的加載器，包括加載各種靜態(tài)資源。

（3）支持代碼分割，提供按需加載的能力。

（4）它是一個(gè)理想的發(fā)布工具。

29、WebPack的優(yōu)勢(shì)是什么？

優(yōu)勢(shì)如下：

（1） WebPack以 CommonJS的形式書(shū)寫(xiě)腳本，對(duì) AMD/CMD的支持也很全面，方便對(duì)舊項(xiàng)目進(jìn)行代碼遷移

（2）絕大部分前端資源都可以模塊化。

（3）開(kāi)發(fā)便捷，能替代 grunt/gulp的部分工作，如程序打包、壓縮混淆、圖片轉(zhuǎn)base64編碼等。

（4）擴(kuò)展性強(qiáng)，插件機(jī)制完善，特別是支持 React熱插拔功能。

30、圖片處理常見(jiàn)的加載器有幾種？

有以下幾種。

（1）file- loader，默認(rèn)情況下會(huì)根據(jù)圖片生成對(duì)應(yīng)的MD5散列的文件格式。

（2）url- loader，它類似于file- loader，但是url- loader可以根據(jù)自身文件的大小，來(lái)決定是否把轉(zhuǎn)化為base64格式的 DataUrl單獨(dú)作為文件，也可以自定義對(duì)應(yīng)的散列文件名。

（3） image- webpack- loader，提供壓縮圖片的功能。

31、WebPack命令的-- config選項(xiàng)有什么作用？

-- config用來(lái)指定一個(gè)配置文件，代替命令行中的選項(xiàng)，從而簡(jiǎn)化命令。如果直接執(zhí)行 WebPack, WebPack會(huì)在當(dāng)前目錄下查找名為 webpack. config. js的文件。