Webpack中publicPath使用詳解

目錄

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

output

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

output.path

默認值：process.cwd()
output.path只是指示輸出的目錄，對應一個(gè)絕對路徑，例如在項目中通常會(huì )做如下配置：

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

output.publicPath

默認值：空字符串
是

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

而關(guān)于如何應用該路徑并沒(méi)有說(shuō)清楚...

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

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

例如

output.publicPath = '/dist/'

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

// 最終圖片的訪(fǎng)問(wèn)路徑為
output.publicPath + 'img/[name].[ext]?[hash]' = '/dist/img/[name].[ext]?[hash]'

// js output.filename
output: {
 filename: '[name].js'
}
// 最終js的訪(fǎng)問(wèn)路徑為
output.publicPath + '[name].js' = '/dist/[name].js'

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

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

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

一般情況下publicPath應該以'/'結尾，而其他loader或插件的配置不要以'/'開(kāi)頭

webpack-dev-server中的publicPath

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

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

例如：

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

以上可以直接通過(guò)http://lcoalhost:8080/dist/main.js訪(fǎng)問(wèn)到。

通過(guò)訪(fǎng)問(wèn) http://localhost:8080/webpack-dev-server 可以得到devServer啟動(dòng)后的資源訪(fǎng)問(wèn)路徑，如圖所示，點(diǎn)擊靜態(tài)資源可以看到靜態(tài)資源的訪(fǎng)問(wèn)路徑為 http://localhost:8080${publicPath}index.html

html-webpack-plugin

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

template

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

源碼：

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

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

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可能會(huì )導致引用靜態(tài)資源失敗，因為在devServer中仍然以output.publicPath引用靜態(tài)資源，和webpack-dev-server的提供的資源訪(fǎng)問(wèn)路徑不一致，從而無(wú)法正常訪(fǎng)問(wèn)。

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

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

最后

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

斜杠/的含義

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

devServer.publicPath & devServer.contentBase

• devServer.contentBase 告訴服務(wù)器從哪里提供內容。只有在你想要提供靜態(tài)文件時(shí)才需要。
• devServer.publicPath 將用于確定應該從哪里提供 bundle，并且此選項優(yōu)先。

node中的路徑

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

參考

到此這篇關(guān)于Webpack中publicPath使用詳解的文章就介紹到這了,更多相關(guān)Webpack publicPath內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！