錯(cuò)誤之處，歡迎指正愿卒，持續(xù)更新中缚去。
1. 如何避免webpack打包靜態(tài)資源失敗琼开？
有時(shí)候在npm run build之后易结，會(huì)發(fā)現(xiàn)靜態(tài)資源js、css、圖片等文件都報(bào)了404的錯(cuò)誤搞动。
- 在不進(jìn)行
publicPath配置的時(shí)候的情況躏精，生成的index.html文件中：
<link href="/css/app.bc1355b8.css">
/代表的是根目錄，也就是在根目錄下面尋找css文件夾,路徑出現(xiàn)錯(cuò)誤了鹦肿。
-
publicPath配置為./的時(shí)候矗烛，生成的index.html文件中：
<link href="./css/app.bc1355b8.css">
./代表的是當(dāng)前目錄，我們先看一下dist文件夾中的結(jié)構(gòu)：
dist文件夾結(jié)構(gòu)
此時(shí)在
index.html中的./就代表著要在dist文件夾下搜索css/app.bc1355b8.css箩溃，路徑正確無誤瞭吃。
2. 為什么要用webpack打包項(xiàng)目？
當(dāng)開發(fā)時(shí)模塊細(xì)分過多時(shí)涣旨，會(huì)有較多的js文件歪架，瀏覽器請(qǐng)求的js文件過多，會(huì)影響效率开泽。webpack是一款構(gòu)建工具牡拇，讓開發(fā)者在開發(fā)時(shí)，只關(guān)注代碼層面的問題穆律，然后利用這個(gè)工具將開發(fā)時(shí)編寫的代碼轉(zhuǎn)化為運(yùn)行時(shí)所期望的。
3. webpack打包的時(shí)候如何處理css文件导俘？
使用css-loader將css代碼轉(zhuǎn)換為js代碼峦耘，因?yàn)?code>webpack默認(rèn)只解析javascript代碼；再使用style-loader將css樣式放到style標(biāo)簽中旅薄。
4. 簡(jiǎn)述webpack編譯過程辅髓。
- 初始化
webpack將cli參數(shù)、配置文件少梁、默認(rèn)配置進(jìn)行融合洛口，形成最終的一個(gè)配置對(duì)象。 - 編譯
- 創(chuàng)建
chunk
chunk是webpack在構(gòu)建中產(chǎn)生的一個(gè)概念凯沪，譯為塊第焰，它表示通過某個(gè)入口找到的所有依賴的文件的總稱。 - 構(gòu)建依賴模塊
從入口模塊開始妨马，進(jìn)行抽象語法樹分析挺举，然后從模塊的內(nèi)容中找出依賴關(guān)系，并把轉(zhuǎn)換后的代碼存入chunk中烘跺。最終形成多個(gè)模塊的表格：
./src/index.js 轉(zhuǎn)換后的內(nèi)容
./src/a.js 轉(zhuǎn)換后的內(nèi)容
-
chunk assets
將chunk表格中的代碼整合湘纵，組成新的表格：
./dist/main.js 整合后的內(nèi)容
- 合并
合并所有chunk assets，形成總的資源列表滤淳。
- 輸出
根據(jù)總的資源列表梧喷，生成相應(yīng)的文件。這一步，是指一個(gè)chunk生成對(duì)應(yīng)的一個(gè)文件铺敌，也就是入口對(duì)應(yīng)出口汇歹。
