如何使用Webpack中publicPath路徑

這次帶給大家如何使用Webpack中publicPath路徑，使用Webpack中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/'
// 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'

這個最終靜態資源存取路徑在使用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 指令時所在的資料夾的絕對路徑

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

使用JS判斷字串中包含內容方法總結

JS HTML5實綁定滑鼠事件的粒子動畫

以上是如何使用Webpack中publicPath路徑的詳細內容。更多資訊請關注PHP中文網其他相關文章！