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