webpack中output之path和publicPath詳解

path:所有輸出文件的目標路徑;打包后文件在硬盤中的存儲位置。

 

publicPath:輸出解析文件的目錄，指定資源文件引用的目錄 ，打包后瀏覽器訪問服務時的 url 路徑中通用的一部分。

區別：

path是webpack所有文件的輸出的路徑，必須是絕對路徑，比如：output輸出的js,url-loader解析的圖片，HtmlWebpackPlugin生成的html文件，都會存放在以path為基礎的目錄下

publicPath 並不會對生成文件的路徑造成影響，主要是對你的頁面里面引入的資源的路徑做對應的補全，常見的就是css文件里面引入的圖片

 

 output：“path”項和“publicPath”項

output項告訴webpack怎樣存儲輸出結果以及存儲到哪里。output的兩個配置項“path”和“publicPath”可能會造成困惑。

“path”僅僅告訴Webpack結果存儲在哪里，

然而“publicPath”項則被許多Webpack的插件用於在生產模式下更新內嵌到css、html文件里的url值。

圖片描述

例如，在localhost（譯者注：即本地開發模式）里的css文件中邊你可能用“./test.png”這樣的url來加載圖片，但是在生產模式下“test.png”文件可能會定位到CDN上並且你的Node.js服務器可能是運行在HeroKu上邊的。這就意味着在生產環境你必須手動更新所有文件里的url為CDN的路徑。

然而你也可以使用Webpack的“publicPath”選項和一些插件來在生產模式下編譯輸出文件時自動更新這些url。

圖片描述

// 開發環境：Server和圖片都是在localhost（域名）下
.image { 
  background-image: url('./test.png');
}
// 生產環境：Server部署下HeroKu但是圖片在CDN上
.image { 
  background-image: url('https://someCDN/test.png');
}

轉載：https://blog.csdn.net/qq_39207948/article/details/80631435