Webpacked 資源

創(chuàng)新互聯(lián)是一家專業(yè)提供曲阜企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為曲阜眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

我們首先需要理解webpack是怎樣處理靜態(tài)資源的。在*.vue組件中，所有的templates和css都會被vue-html-loader 和 css-loader解析，尋找資源的URL。

舉個例子，在 和 background: url(./logo.png), "./logo.png"中，都是相對資源路徑，都會被Webpack解析成模塊依賴 。

由于logo.png不是JavaScript，當(dāng)被看成一個模塊依賴的時候，我們需要使用url-loader 和 file-loader進行處理。 該模板已經(jīng)配置好了這些loaders，所以你能夠使用相對/模塊路徑時不需要擔(dān)心部署的問題。

由于這些資源可能在構(gòu)建的時候被內(nèi)聯(lián)/復(fù)制/重命名， 所以它們從本質(zhì)上來說是你源碼的一部分。這就是為什么我們建議將交由webpack處理的靜態(tài)資源和其它源文件一樣放在/src路徑下面。

實際上，你甚至不需要把它們?nèi)挤旁?code>/src/assets路徑下：你可以基于模塊/組件的使用來組織文件結(jié)構(gòu)。例如，你可以把每個組件和屬于它的靜態(tài)資源放在它自己的目錄下。

資源處理規(guī)則

相對URL, ./assets/logo.png 將會被解釋成一個模塊依賴。它們會被一個基于你的Webpack輸出配置自動生成的URL替代。

沒有前綴的URL, assets/logo.png 將會被看成相對URL，并且轉(zhuǎn)換成./assets/logo.png

前綴帶~的URL 會被當(dāng)成模塊請求, 類似于require('some-module/image.png'). 如果你想要利用Webpack的模塊處理配置，就可以使用這個前綴。例如，如果你有一個對于assets的路徑解析，你需要使用來確保解析是對應(yīng)上的。

相對根目錄的URL, /assets/logo.png 是不會被處理的.

測試總結(jié)：

1.采用相對路徑，程序內(nèi)部自己編寫的樣式和圖片，一般放在assets文件夾下。

top.vue中要引入圖片assets/images/home/photo.png，可以這樣寫img

本地dev渲染后，圖片路徑：（被打包放在靜態(tài)文件夾static的img下了）

build項目后，打開后圖片路徑：（靜態(tài)文件夾的相對路徑）

2.采用webpack中的alias設(shè)置路徑別名。

top.vue中可以這樣調(diào)用：（圖片放在static/images/home文件夾下）

項目dev后，也會被編譯成：

個人感覺第一種更直觀一些。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。