這次帶給大家Webpack path與publicPath使用優劣勢詳解，Webpack path與publicPath使用的注意事項有哪些，以下就是實戰案例，一起來看一下。
前言
在webpack模組化開發的過程中，發現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
你上傳所有打包檔案的位置（相對於伺服器根目錄）
path：用來存放打包後檔案的輸出目錄
publicPath：指定資源檔案引用的目錄
用途：例如在express中，指定了public/dist是網站的根目錄，網站的來源檔案存放在public中，那麼就需要設定path:”./ dist」指定打包輸出到該目錄，而publicPath就需要設定為”/”,表示目前路徑。
publicPath取決於你的網站根目錄的位置，因為打包的檔案都在網站根目錄了，這些檔案的引用都是基於該目錄的。假設網站根目錄為public，引用的圖片路徑是'./img.png'，如果publicPath為'/'，圖片顯示不了，因為圖片都打包放在了dist中，那麼你就要把publicPath設定為” /dist」。
舉個例子：
/assets/
假設你將這個工程部署在伺服器http://server/
透過將output.publicPath設定為/assets/，這個工程將會在http://server/assets/找到webpack資源。
在這個前提下，所有與webpack相關的路徑都會被重寫成以/assets/開頭。
src="picture.jpg" Re-writes ➡ src="/assets/picture.jpg" Accessed by: (http://server/assets/picture.jpg) src="/img/picture.jpg" Re-writes ➡ src="/assets/img/picture.jpg" Accessed by: (http://server/assets/img/picture.jpg)
重要
如果你在用style-loader或css sourceMap，就需要設定publicPath。把它設定成伺服器位址的絕對路徑，例如http://server/assets/，這樣資源可以正確載入。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是Webpack path與publicPath使用優劣勢詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
