這篇文章主要為大家展示了“Webpack中publicPath路徑問題的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Webpack中publicPath路徑問題的示例分析”這篇文章吧。

成都創(chuàng)新互聯(lián)公司10多年成都定制網(wǎng)站服務(wù);為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計(jì)及高端網(wǎng)站定制服務(wù),成都定制網(wǎng)站及推廣,對成都石牌坊等多個(gè)行業(yè)擁有豐富的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。

output

output選項(xiàng)指定webpack輸出的位置，其中比較重要的也是經(jīng)常用到的有 path 和 publicPath

output.path

默認(rèn)值： process.cwd()

output.path 只是指示輸出的目錄，對應(yīng)一個(gè) 絕對路徑 ，例如在項(xiàng)目中通常會(huì)做如下配置：

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

output.publicPath

默認(rèn)值：空字符串

官方文檔中對publicPath的解釋 是

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

而關(guān)于如何應(yīng)用該路徑并沒有說清楚...

其實(shí)這里說的所有資源的基礎(chǔ)路徑是指項(xiàng)目中引用css，js，img等資源時(shí)候的一個(gè)基礎(chǔ)路徑，這個(gè)基礎(chǔ)路徑要配合具體資源中指定的路徑使用，所以其實(shí)打包后資源的訪問路徑可以用如下公式表示：

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

例如

output.publicPath = '/dist/'

// image
options: {
 name: 'img/[name].[ext]?[hash]'
}

// 最終圖片的訪問路徑為
output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'

// js output.filename
output: {
 filename: '[name].js'
}
// 最終js的訪問路徑為
output.publicPath + '[name].js' = '/dist/[name].js'

// extract-text-webpack-plugin css
new ExtractTextPlugin({
 filename: 'style.[chunkhash].css'
})
// 最終css的訪問路徑為
output.publicPath + 'style.[chunkhash].css' = '/dist/style.[chunkhash].css'

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

所以這里需要在上線時(shí)候手動(dòng)更改 publicPath ，感覺不是很方便，但是不知道該如何解決...

一般情況下 publicPath應(yīng)該以'/'結(jié)尾，而其他loader或插件的配置不要以'/'開頭

webpack-dev-server中的publicPath

點(diǎn)擊查看官方文檔中關(guān)于devServer.publicPath的介紹

在開發(fā)階段，我們借用devServer啟動(dòng)一個(gè)開發(fā)服務(wù)器進(jìn)行開發(fā)，這里也會(huì)配置一個(gè) publicPath ，這里的 publicPath 路徑下的打包文件可以在瀏覽器中訪問。而靜態(tài)資源仍然使用 output.publicPath 。

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

例如：

// 假設(shè)devServer的publicPath為
const publicPath = '/dist/'
// 則啟動(dòng)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啟動(dòng)后的資源訪問路徑，如圖所示，點(diǎn)擊靜態(tài)資源可以看到靜態(tài)資源的訪問路徑為 http://localhost:8080${publicPath}index.html

html-webpack-plugin

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

template

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

源碼：

復(fù)制代碼 代碼如下:

this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);

因此 template 只有定義在webpack的 context 下才會(huì)被識(shí)別， webpack context的默認(rèn)值為 process.cwd() ，既運(yùn)行 node 命令時(shí)所在的文件夾的絕對路徑

filename

作用：輸出的HTML文件名，默認(rèn)為index.html，可以直接配置帶有子目錄

源碼：

復(fù)制代碼 代碼如下:

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可能會(huì)導(dǎo)致引用靜態(tài)資源失敗，因?yàn)樵赿evServer中仍然以 output.publicPath 引用靜態(tài)資源，和webpack-dev-server的提供的資源訪問路徑不一致，從而無法正常訪問。

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

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

最后

關(guān)于webpack中的 path 就總結(jié)這么多，在研究關(guān)于webpack路徑的過程中看查到的一些關(guān)于路徑的零碎的知識(shí)如下：

斜杠/的含義

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

devServer.publicPath & devServer.contentBase

1. devServer.contentBase 告訴服務(wù)器從哪里提供內(nèi)容。只有在你想要提供靜態(tài)文件時(shí)才需要。

2. devServer.publicPath 將用于確定應(yīng)該從哪里提供 bundle，并且此選項(xiàng)優(yōu)先。

node中的路徑

1. __dirname: 總是返回被執(zhí)行的 js 所在文件夾的絕對路徑

2. __filename: 總是返回被執(zhí)行的 js 的絕對路徑

3. process.cwd(): 總是返回運(yùn)行 node 命令時(shí)所在的文件夾的絕對路徑

以上是“Webpack中publicPath路徑問題的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：Webpack中publicPath路徑問題的示例分析-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://chinadenli.net/article8/dgipip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、全網(wǎng)營銷推廣、用戶體驗(yàn)、Google、手機(jī)網(wǎng)站建設(shè)、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)