首頁 > web前端 > js教程 > 主體

Webpack path與publicPath使用優劣勢詳解

php中世界最好的语言
發布: 2018-05-14 13:33:10
原創
1739 人瀏覽過

這次帶給大家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中文網其它相關文章!

推薦閱讀:

Vue表單類別父子元件資料傳遞資料方法總結

angular routerlink跳轉方式總結

以上是Webpack path與publicPath使用優劣勢詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!