webpack學(xué)習(xí)教程之publicPath路徑問(wèn)題詳解
本文主要給大家介紹了關(guān)于webpack中publicPath路徑問(wèn)題的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)看看詳細(xì)的介紹：
output: {
filename: "[name].js",
path:path.resolve(__dirname,"build")
}
如果沒(méi)有指定pubicPath,則引入路徑如下
<body> <script src="b.js"></script> </body>
如果有指定publicPath
output: {
filename: "[name].js",
path:path.resolve(__dirname,"build"),
publicPath:"/assets/"
}
則引入如下
<body> <script src="assets/b.js"></script> </body>
webpack-dev-server環(huán)境下，path、publicPath、區(qū)別與聯(lián)系
path：指定編譯目錄而已（/build/js/），不能用于html中的js引用。
publicPath：虛擬目錄，自動(dòng)指向path編譯目錄（/assets/ => /build/js/）。html中引用js文件時(shí)，必須引用此虛擬路徑（但實(shí)際上引用的是內(nèi)存中的文件，既不是/build/js/也不是/assets/）。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
發(fā)布至生產(chǎn)環(huán)境：
1.webpack進(jìn)行編譯（當(dāng)然是編譯到/build/js/）
2.把編譯目錄（/build/js/）下的文件，全部復(fù)制到/assets/目錄下（注意：不是去修改index.html中引用bundle.js的路徑）
之前因?yàn)閜ublicPath的路徑錯(cuò)誤原因，導(dǎo)致webpack-dev-server不能自動(dòng)刷新
總結(jié)
以上就是這文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JavaScript利用正則表達(dá)式替換字符串中的內(nèi)容
本文主要介紹了JavaScript利用正則表達(dá)式替換字符串中內(nèi)容的具體實(shí)現(xiàn)方法，并做了簡(jiǎn)要注釋，便于理解。具有一定的參考價(jià)值，需要的朋友可以看下2016-12-12
本文主要介紹了Javascript中Promise的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
通過(guò)JAVASCRIPT讀取ASP設(shè)定的COOKIE
通過(guò)JAVASCRIPT讀取ASP設(shè)定的COOKIE...2006-11-11
Bootstrap每天必學(xué)之js插件，Bootstrap 自帶 12 種 jQuery 插件，擴(kuò)展了功能，可以給站點(diǎn)添加更多的互動(dòng)，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript中檢測(cè)數(shù)組的3種方法小結(jié)
數(shù)組檢測(cè)是指在編程中對(duì)數(shù)組進(jìn)行驗(yàn)證和檢查的過(guò)程,本文主要介紹了JavaScript中檢測(cè)數(shù)組的3種方法小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
從對(duì)象列表中獲取一個(gè)對(duì)象的方法,依據(jù)關(guān)鍵字和值
下面小編就為大家?guī)?lái)一篇從對(duì)象列表中獲取一個(gè)對(duì)象的方法,依據(jù)關(guān)鍵字和值。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
關(guān)于JS打印問(wèn)題！網(wǎng)上收集+自己總結(jié) ，需要的朋友可以參考下。2009-11-11
這篇文章主要介紹了微信小程序 css使用技巧總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript實(shí)現(xiàn)頁(yè)面無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁(yè)面無(wú)縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了JS前端圖片最優(yōu)化壓縮方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09