国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

Webpack中publicPath路徑問題詳解

2019-11-19 13:55:43
字體:
來源:轉載
供稿:網友

最近自己在搭建一個基于webpack的react項目,遇到關于output.publicPath和webpack-dev-server中publicPath的問題,而官方文檔對它們的描述也不是很清楚,所以自己研究了下并寫下本文記錄。

output

output選項指定webpack輸出的位置,其中比較重要的也是經常用到的有 path 和 publicPath

output.path

默認值: process.cwd()

output.path 只是指示輸出的目錄,對應一個 絕對路徑 ,例如在項目中通常會做如下配置:

output: { path: path.resolve(__dirname, '../dist'),}

output.publicPath

默認值:空字符串

官方文檔中對publicPath的解釋

webpack 提供一個非常有用的配置,該配置能幫助你為項目中的所有資源指定一個基礎路徑,它被稱為公共路徑(publicPath)。

而關于如何應用該路徑并沒有說清楚...

其實這里說的所有資源的基礎路徑是指項目中引用css,js,img等資源時候的一個基礎路徑,這個基礎路徑要配合具體資源中指定的路徑使用,所以其實打包后資源的訪問路徑可以用如下公式表示:

靜態資源最終訪問路徑 = output.publicPath + 資源loader或插件等配置路徑

例如

output.publicPath = '/dist/'// imageoptions: { name: 'img/[name].[ext]?[hash]'}// 最終圖片的訪問路徑為output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'// js output.filenameoutput: { filename: '[name].js'}// 最終js的訪問路徑為output.publicPath + '[name].js' = '/dist/[name].js'// extract-text-webpack-plugin cssnew ExtractTextPlugin({ filename: 'style.[chunkhash].css'})// 最終css的訪問路徑為output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'

這個最終靜態資源訪問路徑在使用html-webpack-plugin打包后得到的html中可以看到。所以 publicPath 設置成相對路徑后,相對路徑是相對于build之后的index.html的,例如,如果設置 publicPath: './dist/' ,則打包后js的引用路徑為 ./dist/main.js ,但是這里有一個問題,相對路徑在訪問本地時可以,但是如果將靜態資源托管到CDN上則訪問路徑顯然不能使用相對路徑,但是如果將 publicPath 設置成 / ,則打包后訪問路徑為 localhost:8080/dist/main.js ,本地無法訪問

所以這里需要在上線時候手動更改 publicPath ,感覺不是很方便,但是不知道該如何解決...

一般情況下 publicPath應該以'/'結尾,而其他loader或插件的配置不要以'/'開頭

webpack-dev-server中的publicPath

點擊查看官方文檔中關于devServer.publicPath的介紹

在開發階段,我們借用devServer啟動一個開發服務器進行開發,這里也會配置一個 publicPath ,這里的 publicPath 路徑下的打包文件可以在瀏覽器中訪問。而靜態資源仍然使用 output.publicPath 。

webpack-dev-server打包的內容是放在內存中的,這些打包后的資源對外的的根目錄就是 publicPath ,換句話說,這里我們設置的是打包后資源存放的位置

例如:

// 假設devServer的publicPath為const publicPath = '/dist/'// 則啟動devServer后index.html的位置為const htmlPath = `${pablicPath}index.html`// 包的位置cosnt mainJsPath = `${pablicPath}main.js`

以上可以直接通過 http://lcoalhost:8080/dist/main.js 訪問到。

通過訪問 http://localhost:8080/webpack-dev-server 可以得到devServer啟動后的資源訪問路徑,如圖所示,點擊靜態資源可以看到靜態資源的訪問路徑為 http://localhost:8080${publicPath}index.html

html-webpack-plugin

這個插件用于將css和js添加到html模版中,其中 template 和 filename 會受到路徑的影響,從源碼中可以看出

template

作用:用于定義模版文件的路徑

源碼:

復制代碼 代碼如下:
this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

因此 template 只有定義在webpack的 context 下才會被識別, webpack context的默認值為 process.cwd() ,既運行 node 命令時所在的文件夾的絕對路徑

filename

作用:輸出的HTML文件名,默認為index.html,可以直接配置帶有子目錄

源碼:

復制代碼 代碼如下:
this.options.filename = path.relative(compiler.options.output.path, filename);

所以filename的路徑是相對于 output.path 的,而在webpack-dev-server中,則是相對于webpack-dev-server配置的 publicPath 。

如果webpack-dev-server的 publicPath 和 output.publicPath 不一致,在使用html-webpack-plugin可能會導致引用靜態資源失敗,因為在devServer中仍然以 output.publicPath 引用靜態資源,和webpack-dev-server的提供的資源訪問路徑不一致,從而無法正常訪問。

有一種情況除外,就是 output.publicPath 是相對路徑,這時候可以訪問本地資源

所以一般情況下都要保證devServer中的 publicPath 與 output.publicPath 保持一致。

最后

關于webpack中的 path 就總結這么多,在研究關于webpack路徑的過程中看查到的一些關于路徑的零碎的知識如下:

斜杠/的含義

配置中/代表url根路徑,例如http://localhost:8080/dist/js/test.js中的http://localhost:8080/

devServer.publicPath & devServer.contentBase

  1. devServer.contentBase 告訴服務器從哪里提供內容。只有在你想要提供靜態文件時才需要。
  2. devServer.publicPath 將用于確定應該從哪里提供 bundle,并且此選項優先。

node中的路徑

  1. __dirname: 總是返回被執行的 js 所在文件夾的絕對路徑
  2. __filename: 總是返回被執行的 js 的絕對路徑
  3. process.cwd(): 總是返回運行 node 命令時所在的文件夾的絕對路徑

參考

詳解Webpack2的那些路徑
webpack 公共路徑(Public Path)
devServer.publicPath
淺析 NodeJs 的幾種文件路徑

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 平定县| 菏泽市| 元谋县| 尚义县| 株洲县| 德化县| 新津县| 莒南县| 衡南县| 龙里县| 班玛县| 崇义县| 大新县| 辉南县| 景宁| 佛坪县| 南木林县| 孙吴县| 兰坪| 淳化县| 且末县| 哈尔滨市| 衡阳县| 红安县| 内黄县| 乡城县| 南川市| 习水县| 佛山市| 彭泽县| 上虞市| 抚远县| 陇川县| 剑河县| 潮州市| 泽普县| 镇雄县| 桓仁| 改则县| 县级市| 山丹县|