今天就跟大家聊聊有關(guān)path與publicPath在Webpack中有什么區(qū)別，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)公司為您提適合企業(yè)的網(wǎng)站設(shè)計?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強的網(wǎng)絡(luò)競爭力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到網(wǎng)站制作、成都做網(wǎng)站， 我們的網(wǎng)頁設(shè)計師為您提供的解決方案。

在webpack模塊化開發(fā)的過程中，發(fā)現(xiàn)webpack.config.js配置文件的輸出路徑總有一個path與publicPath，不解其意。

module.exports = {
 output: {
 path: path.resolve("./examples/dist"),
 filename: "app.js",
 publicPath: "What should I put here?" 
 } 
}

正文

官方解釋

publicPath: The output.path from the view of the Javascript / HTML page.

從JS/HTML頁面來看的輸出路徑

我的理解

output.path 儲存你所有輸出文件的本地文件目錄。（絕對路徑）

舉個例子：

path.join(__dirname, “build/”)

webpack將會把所有的文件輸出到localdisk/path-to-your-project/build/

output.publicPath

你上傳所有打包文件的位置（相對于服務(wù)器根目錄）

path：用來存放打包后文件的輸出目錄

publicPath：指定資源文件引用的目錄

用處：例如在express中，指定了public/dist是網(wǎng)站的根目錄，網(wǎng)站的源文件存放在public中，那么就需要設(shè)置path:”./dist”指定打包輸出到該目錄，而publicPath就需要設(shè)置為”/”,表示當(dāng)前路徑。

publicPath取決于你的網(wǎng)站根目錄的位置，因為打包的文件都在網(wǎng)站根目錄了，這些文件的引用都是基于該目錄的。假設(shè)網(wǎng)站根目錄為public，引用的圖片路徑是'./img.png'，如果publicPath為'/'，圖片顯示不了，因為圖片都打包放在了dist中，那么你就要把publicPath設(shè)置為”/dist”。

舉個例子：

/assets/

假設(shè)你將這個工程部署在服務(wù)器 http://server/

通過將output.publicPath設(shè)置為/assets/，這個工程將會在http://server/assets/找到webpack資源。

在這種前提下，所有與webpack相關(guān)的路徑都會被重寫成以/assets/開頭。

src="picture.jpg" Re-writes ? src="/assets/picture.jpg"

Accessed by: (/upload/otherpic69/43262.jpg)

src="/img/picture.jpg" Re-writes ? src="/assets/img/picture.jpg"

Accessed by: (/upload/otherpic69/43267.jpg)

看完上述內(nèi)容，你們對path與publicPath在Webpack中有什么區(qū)別有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。