webpack結合reactjs、vuejs項目中圖片處理

這篇文章主要整理一下本身在使用 webpack 結合 vuejs 或 reactjs 開發過程當中圖片的處理方法。

個人需求

項目打包以後（假定輸出目錄爲 dist），除了 index.html，將全部的靜態資源上傳至 cdn，而並不是打包以後全部靜態資源都在應用服務器上。

index.html 中的圖片

由於是 SPA，模版頁面惟一要處理的圖片就是 favicon，這個資源在 IE 10 及如下瀏覽器只須要在 dist 根目錄下存在 favicon.icon 文件（名稱、後綴固定）便可，這種方式已經廢棄，更好的作法是使用 link 標籤引用，如：

<link rel="icon" sizes="192x192" href="/path/to/icon.png">
複製代碼

處理這個圖片，我嘗試了三個方法：

1.html-webpack-plugin 的 favicon 屬性配置

不適合我。

它會將文件輸出至 dist 根目錄下，與 index.html 同級，引用的是本地圖片，而非 cdn 圖片。

2.favicons-webpack-plugin

不適合我。

很強大，能根據你給的圖片，生成全部類型的 icon 圖標，問題有兩個：首先是依賴了 phantomjs，牆外的站點，你懂得；再者引用的依舊是本地圖片。

組件實現

適合我。

vuejs 的 vue-head 組件，reactjs 的 react-helmet 組件，能夠配置 link 方式的 favicon。圖片打包上傳 cdn 以後，頁面的圖片地址也爲 cdn 地址。

其它

若是你的模版頁面有其餘諸如 src 圖片引用，可參考 html-withimg-loader

頁面 Head 大全

vuejs 項目中圖片處理

前提：使用 vue-loader v15，webpack 配置好 url-loader 和 alias：

module.exports = {
    // ...其餘配置
    modules: {
        rules: [
            {
                test: /\.(jpe?g|png|gif)(\?.*)?$/,
                use: 'url-loader?limit=1024&name=statics/img/[name]-[hash:5].[ext]',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {
        alias: {
          Images: path.resolve('public', 'statics', 'img'),
        },
    },
    // ...其餘配置
}
複製代碼

template 中使用

<img src="~Images/logo.png">
<img :src="require('Images/logo.png')"> // 注意 v-bind
複製代碼

有個問題我目前沒有解決(精簡代碼)，還請大神指教:

// 無效，提示沒法找到這個資源
<img :src="require(`${img}`)">

data() {
  img: 'Images/logo.png'
}
複製代碼

// 有效
<img :src="require(`Images/${img}`)">

data() {
  img: 'logo.png'
}
複製代碼

已解決，官網對 require 的說明： A context is created if your request contains expressions, so the exact module is not known on compile time.

樣式表中使用

貌似沒法使用 alias，只能使用 ~ 和相對路徑：

body {
  background: url(Images/logo.png); // alias，錯誤
  background: url(/Images/logo.png); // 有效，可是引用本地文件
  background: url(~Images/logo.png);
  background: url(../../statics/img/logo.png);
  background: url(./../../statics/img/logo.png);
}
複製代碼

以 . 開頭，將會被看做相對的模塊依賴，並按照你的本地文件系統上的目錄結構進行解析。

reactjs 中圖片處理

前提：webpack 配置好 url-loader 和 alias

使用

無論是組件中仍是樣式表中，均可以使用 alias 和相對路徑：

require('Images/logo.png');
require('../../statics/img/logo.png');
require('./../../statics/img/logo.png');
複製代碼

body {
  background: url(Images/logo.png);
  background: url(../../statics/img/logo.png);
  background: url(./../../statics/img/logo.png);
}
複製代碼

最後

./ 無關緊要，相對路徑是以當前的文件爲基礎，注意 ../ 層數問題；不要以 / 開頭，由於最終都是引用的本地圖片。 若有謬誤，懇請斧正。