快捷導(dǎo)航

詳解webpack中的publicpath

更新時(shí)間：2024年01月25日 16:18:57 作者：前端?賈公子

這篇文章主要介紹了webpack中的publicpath,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

webpack中的publicpath

當(dāng)你的項(xiàng)目是放在服務(wù)器根目錄的時(shí)候，publicpath=“/”
當(dāng)你的項(xiàng)目是放在服務(wù)器根目錄的某個(gè)文件的時(shí)候，publicpath=“/xxx”
如下圖

outPut中的publicPath

默認(rèn)值：空字符串。

　　publicPath是非常有必要配置的，他是項(xiàng)目中引入靜態(tài)資源（js、css）時(shí)的基礎(chǔ)路徑。

例如：outPut.publicPath = '/dist/';

在使用html - webpack - plugin插件打包后的html文件（下圖）可以看到，引入js文件的路徑為“publicPath + 靜態(tài)資源“。敲黑板劃重點(diǎn)，這里publicPath應(yīng)該寫(xiě)“以根目錄的方式表示的路徑，如：/dist/”或者是絕對(duì)路徑，不應(yīng)該是相對(duì)路徑。因?yàn)閷㈧o態(tài)資源放在CDN上時(shí)，使用相對(duì)路徑是無(wú)法訪問(wèn)到資源的。如果不設(shè)置pablicPath行不行，答案是不行。不設(shè)置的話默認(rèn)取值為空字符串（pablicPath: ' '），那么使用html - webpack - plugin打包后的html中引入的js路徑為 src = "../folder1.a095318635a306de0d2e.js"，對(duì)，成了相對(duì)路徑了。所以如果在生產(chǎn)環(huán)境上，publicPath設(shè)置成絕對(duì)路徑最好。

webpack-dev-server中的publicPath

默認(rèn)值：‘/’。注意，如果你output和devServer中都沒(méi)有配置publicPath，那么devServer的publicPath默認(rèn)值為‘/’；但是如果output中配了publicPath，devServer中沒(méi)配，那么devServer中publicPath的默認(rèn)值以output中的為準(zhǔn)。

　　在開(kāi)發(fā)階段，我們要用devServer啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器，這里也有一個(gè)publicPath需要配置。webpack-dev-server打包的文件是放在內(nèi)存中的而不是本地上，這些打包后的資源對(duì)外的根目錄就是publicPath。

例如：

devServer: {
  ...
  publicPath: '/dist/'    
}

那么我們可以在瀏覽器中輸入，http://localhost:9000/dist/ + 資源名，就可以訪問(wèn)到該資源（下圖）。注意：devServer中的publicPath需要跟outPut中的一致，或則不設(shè)置publicPath，他會(huì)默認(rèn)與output中的一致

斜杠/的含義

配置中/代表url根路徑，例如http://localhost:8080/dist/js/test.js中的http://localhost:8080/

常見(jiàn)問(wèn)題：

　瀏覽器打開(kāi)http://localhost:9000/index.html時(shí)頁(yè)面空白。這是因?yàn)閛utput與devServer中的publicPath不一致，導(dǎo)致資源沒(méi)有引入進(jìn)頁(yè)面里。

例子：

假如你的配置如下就會(huì)出現(xiàn)頁(yè)面空白的問(wèn)題

output: {
  ...
  publicPath: '/dist/'        
}
devServer: {
  ...
  publicPath: '/assets/'    
}

html-webpack-plugin插件在打包html（下圖）時(shí)，里面引入js文件的路徑會(huì)是src="/dist/資源名" 。但是http://localhost:9000/dist/folder1.0bad1ca562f90da47034.js是引入不到該資源的，而http://localhost:9000/assets/folder1.0bad1ca562f90da47034.js可以引入到該資源。體會(huì)下這句話，"開(kāi)發(fā)環(huán)境時(shí)，用webpack-dev-server打包的資源是存放在devServer.publicPath路徑下"，你就會(huì)明白了。所以output和devServer中的publicPath需要一致。