webpack中的靜態資源處理

你可能已經注意到，在咱們的項目結構裏，有兩個靜態文件的路徑，分別是：src/assets 和 static/。那這兩個到底有什麼區別呢？

Webpacked 資源

爲了回答這個問題，咱們首先須要理解webpack是怎樣處理靜態資源的。在*.vue組件中，全部的templates和css都會被vue-html-loader 和 css-loader解析，尋找資源的URL。舉個例子，在<img src="./logo.png"> 和 background: url(./logo.png), "./logo.png"中，都是相對資源路徑，都會被Webpack解析成模塊依賴 。

因爲logo.png不是JavaScript，當被當作一個模塊依賴的時候，咱們須要使用url-loader 和 file-loader進行處理。 該模板已經配置好了這些loaders，因此你可以使用相對/模塊路徑時不須要擔憂部署的問題。 （This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.）

因爲這些資源可能在構建的時候被內聯/複製/重命名， 因此它們從本質上來講是你源碼的一部分。這就是爲何咱們建議將交由webpack處理的靜態資源和其它源文件同樣放在/src路徑下面。實際上，你甚至不須要把它們全都放在/src/assets路徑下：你能夠基於模塊/組件的使用來組織文件結構。例如，你能夠把每一個組件和屬於它的靜態資源放在它本身的目錄下。

資源處理規則

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

• 沒有前綴的URL, e.g. assets/logo.png 將會被當作相對URL，而且轉換成./assets/logo.png

• 前綴帶~的URL 會被當成模塊請求, 相似於require('some-module/image.png'). 若是你想要利用Webpack的模塊處理配置，就可使用這個前綴。例如，若是你有一個對於assets的路徑解析，你須要使用<img src="~assets/logo.png">來確保解析是對應上的。

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

在JavaScript裏獲取資源路徑

爲了能讓Webpack返回正確的資源路徑，你須要使用require('./relative/path/to/file.jpg')，由file-loader進行解析，而後返回處理過的URL。例如：

computed: {
  background () {
    return require('./bgs/' + this.id + '.jpg')
  }
}

"真實的" 靜態資源

做爲對比，在static/下的文件都不會被Webpack處理：它們使用相同的文件名，直接拷貝到最終的路徑。你必須使用絕對路徑來引用這些文件，取決於在config.js裏面加入的build.assetsPublicPath 和 build.assetsSubDirectory。

舉個例子，下面的默認值是：

注意上面的例子，在最終的構建時將會包含./bgs/路徑下的全部圖片 這是由於Webpack不能猜出來在運行時會用到其中的哪一個，因此會包含全部的。

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

全部放在 static/目錄下的文件都應該是使用絕對URL/static/[filename]引用的。若是你將assetSubDirectory的值改爲assets， 那麼這些URL就會被變成 /assets/[filename]