-
output 中的 path 和 publicPath
- path: 項(xiàng)目打包所存放到的路徑，此路徑中包含項(xiàng)目所有文件和目錄忍级。應(yīng)該是一個(gè)絕對(duì)路徑。
- publicPath: 靜態(tài)文件打包存放的目錄呵俏。靜態(tài)文件是指 img 的src ,link 吻商，script 標(biāo)簽等所指向的文件。publicPath 是相對(duì)于path 所在的路徑趣效。是一個(gè)相對(duì)路徑瘦癌。
publicPath大白話：
- 對(duì)于按需加載(on-demand-load)或加載外部資源(external resources)（如圖片、文件等）來(lái)說(shuō)跷敬，output.publicPath 是很重要的選項(xiàng)讯私。如果指定了一個(gè)錯(cuò)誤的值，則在加載這些資源時(shí)會(huì)收到 404 錯(cuò)誤西傀。
- 此選項(xiàng)指定在瀏覽器中所引用的「此輸出目錄對(duì)應(yīng)的公開 URL」斤寇。相對(duì) URL(relative URL) 會(huì)被相對(duì)于 HTML 頁(yè)面（或 <base> 標(biāo)簽）解析。
- publicPath是用于引導(dǎo)靜態(tài)資源(js,css,img)拥褂，比如在頁(yè)面引入了background-image:url(’/static/people.png’); 這時(shí)候這里的路徑就會(huì)相對(duì)publicPath做調(diào)整娘锁；指的是將來(lái)這些靜態(tài)資源將會(huì)放到哪，由線上靜態(tài)資源存放的路徑?jīng)Q定的
publicPath取決于根目錄path的位置肿仑，因?yàn)榇虬奈募荚趐ath目錄了致盟，這些文件的引用都是基于該目錄的。假設(shè)path為public尤慰，引用的圖片路徑是'./img.png'馏锡，如果publicPath為'/'，圖片顯示不了伟端，因?yàn)閳D片都打包放在了dist中杯道，那么你就要把publicPath設(shè)置為”/dist”。
-
舉個(gè)栗子：
假設(shè)你將這個(gè)工程部署在服務(wù)器 http://server/
通過(guò)將output.publicPath設(shè)置為/assets/责蝠，這個(gè)工程將會(huì)在http://server/assets/找到webpack資源党巾。
在這種前提下，所有與webpack相關(guān)的路徑都會(huì)被重寫成以/assets/開頭霜医。
src="picture.jpg" Re-writes ? src="/assets/picture.jpg"
Accessed by: (http://server/assets/picture.jpg)
src="/img/picture.jpg" Re-writes ? src="/assets/img/picture.jpg"
Accessed by: (http://server/assets/img/picture.jpg)
-
devServer 中的publicPath
此路徑下的打包文件可在瀏覽器中訪問(wèn)齿拂。
假設(shè)服務(wù)器運(yùn)行在 http://localhost:8080 并且 output.filename 被設(shè)置為 bundle.js。默認(rèn) devServer.publicPath 是 '/'肴敛，所以你的包(bundle)可以通過(guò)http://localhost:8080/bundle.js 訪問(wèn)署海。
修改 devServer.publicPath吗购，將 bundle 放在指定目錄下：
module.exports = {
//...
devServer: {
publicPath: '/assets/' // 現(xiàn)在可以通過(guò) http://localhost:8080/assets/bundle.js 訪問(wèn) bundle。
}
};
dev 時(shí) 在內(nèi)存中的路徑砸狞，大多時(shí)候捻勉，output.publicPath和devserver.publicPath 保持一致。
最后
如果你在用style-loader或者css sourceMap刀森，你就需要設(shè)置publicPath踱启。把它設(shè)置成服務(wù)器地址的絕對(duì)路徑，比如http://server/assets/研底，這樣資源可以被正確加載埠偿。
