webpack配置中的path、publicPath和contentBase

 

output中的publicPath用於給生成的靜態資源路徑添加前綴，也就是會在打包生成的html文件裏面引用資源路徑中添加前綴。

當定義了output.publicPath值

 

 

 

 如上圖所示資源的路徑加上了publicPath定義的前綴。而且output的publicPath影響到了使用devServer在打包生成的靜態文件的位置，因此訪問localhost:8080時失敗。

 

devServer裏面的publicPath表示的是此路徑下的打包文件可在瀏覽器中訪問，如果devServer裏面的publicPath沒有設置，則會認爲是output裏面設置的publicPath的值。

其內部實現是使用的express.static()中間件函數，例如 app.use('/public', express.static('contentBase'))， '/public' 就至關於 devServer中設置的publicPath，'contentBase'就至關於devServer中設置的contentBase，這樣當瀏覽器使用public路徑訪問時，就能夠讀取到contentBase中的文件，而devServer中的contentBase指定服務器從哪裏提供內容，也就是devServer服務器提供的一個存放打包資源的一個虛擬目錄。

在看一個例子，接着上面的配置，設置devServer的public（若是這裏不設置publicPath，默認讀取output中的publicPath）

 

 

因此contentBase一般不須要設置，有些項目中設置成了'./dist' webpack輸出目錄，其實這裏contentBase指定的‘./dist’ 目錄是一個內存中的虛擬目錄，並非項目中的實際dist目錄。

 

因此簡單的理解是output的publicPath會在打包的html文件中引用資源路徑添加前綴

devServer中的publicPath表示在瀏覽器中用此路徑能夠訪問到打包的資源

devServer中的contentBase指定一個虛擬路徑來讓devServer服務器提供內容

 

這是目前對這幾個路徑的理解，可能有理解不對的地方

 

參考https://juejin.im/post/5bb085dd6fb9a05cd24da5cf